css – 创建一行flexbox项目,其中一个子项定义的最大高度为

参见英文答案 > One flex item sets the height limit for siblings                                    4个
我正在尝试创建一个flexbox布局,它做了一些我认为会更容易的事情,但是我找不到正确的方法.

我希望有一排具有动态高度的项目,允许一个孩子根据需要增长,但限制其他项目的高度,以便切断内容.

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

有任何想法吗？这可能是一个微不足道的问题,但我无法使用我一直在使用的搜索词找到任何内容.谢谢！

这是一个CodePen demo,以防你想修改它以便在你的答案中使用.

这是我的参考flexbox布局：

.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不能本机化,但它是可能的.

你需要一个绝对定位的第二个孩子内部元素.

这里额外的内容是/可以隐藏溢出：隐藏…或通过添加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>