创建一行Flexbox项目，其最大高度由一个孩子

Question

我试图创建一个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>

Answer 1

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%; }显示。

＆＃13;

＆＃13;

<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>

＆＃13;

var script = document.createElement("script");
script.setAttribute("src", src);
document.getElementsByTagName("head")[0].appendChild(script);

＆＃13;

＆＃13;

＆＃13;