创建一行 flexbox 项目，其最大高度由一个孩子定义 [英] Create a row of flexbox items with a max height defined by one child

问题描述

我正在尝试创建一个 flexbox 布局，它可以做一些我认为会更容易的事情，但我找不到正确的方法来做到这一点.

我想要一排具有动态高度的项目，允许一个孩子根据需要长高，但限制另一个项目的高度，以便切断内容.>

我想使用 flexbox，因此与此相关的浏览器问题不是问题，但我想避免在解决方案中使用任何 JavaScript.

有什么想法吗?这可能是一个微不足道的问题，但我无法通过我一直使用的搜索词找到任何内容.谢谢！

这里有一个 CodePen 演示，以防您想修改它以在您的答案中使用.

这是我参考的 flexbox 布局:

.row {显示:弹性；}.信息{弹性:0 0 200px；}.描述 {弹性:1 1 自动；}<div class="row"><div class="info">这应该是动态增长的</div><div class="description">这应该受到 .info div</div> 的高度限制.

解决方案

Flexbox 本身无法做到这一点，但它是可能的.

您将需要在绝对定位的第二个子元素中使用内部元素.

这里额外的内容是/可以用 overflow:hidden 隐藏...或者通过添加 overflow:auto 来显示.

.wrapper {显示:弹性；宽度:80%；保证金:1em 自动；边框:2px纯红色；}.孩子 {弹性:1；边框:2px纯绿色；}.child:nth-child(2) {位置:相对；溢出:自动；/*溢出:隐藏；*//* 删除用于演示目的 */}.内{位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；}

<div class="child">Lorem ipsum dolor sat amet，consectetur adipisicing 精英.Debitis Tenetur，laboriosam！Ab facilis，officia id delectus eaque expedita quia，incidunt eligendi aut，减去 temporibus tenetur.</div><div class="child"><div class="inner">Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Quae Molestiae、liberoinventre nobis et veritatis、laborum vitae、vel eaque omnis ad adipisci quia velit blanditiis qui.Cum voluptas quisquam itaque possimus accusamus repellendus quia iure过时.Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.

I'm trying to create a flexbox layout that does something I thought would be a little easier, but I'm having trouble finding the right way to do it.

I want to have a row of items with dynamic height that allows one child to grow as tall as need be, but limits the height of the other item so that content is cut off.

I want to use flexbox, so browser issues associated with that are not an issue, but I would like to avoid any use of JavaScript in the solution.

Any ideas? This might be a trivial problem, but I'm having trouble finding anything with the search terms I've been using. Thanks!

Here's a CodePen demo in case you'd like to modify it for use in your answer.

This is my reference flexbox layout:

.row {
    display: flex;
}

.info {
    flex: 0 0 200px;
}

.description {
    flex: 1 1 auto;
}

<div class="row">
    <div class="info">This should grow dynamically</div>
    <div class="description">This should be limited in height by the .info div</div>
</div>

解决方案

Flexbox can't do that natively but it is possible.

You will need an inner element inside the second child which is positioned absolutely.

Here the extra content is/can be hidden with overflow:hidden...or revealed by adding overflow:auto.

.wrapper {
  display: flex;
  width: 80%;
  margin: 1em auto;
  border: 2px solid red;
}
.child {
  flex: 1;
  border: 2px solid green;
}
.child:nth-child(2) {
  position: relative;
  overflow: auto;
  /*overflow: hidden; */ /* removed for demo purposes */
}
.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="wrapper">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis tenetur, laboriosam! Ab facilis, officia id delectus eaque expedita quia, incidunt eligendi aut, minus temporibus tenetur.</div>
  <div class="child">
    <div class="inner">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
      asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.
    </div>
  </div>
</div>

这篇关于创建一行 flexbox 项目，其最大高度由一个孩子定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！