html – 限制flexbox项目的高度

概述参见英文答案 > Create a row of flexbox items with a max height defined by one child                                     1个 我有一个带有2个项目的flexbox,direction = row.第二项的文本内容很长.我希望第二项与第一项一样高,并有一个滚动条.这可能吗？ #wrap { d 参见英文答案 > Create a row of flexbox items with a max height defined by one child                                     1个
我有一个带有2个项目的flexBox,direction = row.第二项的文本内容很长.我希望第二项与第一项一样高,并有一个滚动条.这可能吗？

#wrap { display: flex; }#item-1 { height: 100px; background: orange; flex: 1; }#item-2 { overflow: scroll; flex: 1; }

<div ID='wrap'>  <div ID='item-1'></div>  <div ID='item-2'>  I would like this text to have a scrollbar,and thus not take up more height than the orange Box.<br> I would like this text to have a scrollbar,and thus not take up more height than the orange Box.<br>  </div></div>

我发现最近的帖子is this one,但答案在我的情况下似乎不起作用.

解决方法 添加一个位置为absolute的包装器

现在,您可以将最小高度设置为最左侧,最右侧的高度将遵循最小高度.

#wrap { display: flex; }#item-1 { min-height: 100px; background: orange; flex: 1; }#item-2 { position: relative; flex: 1; }#item-wrap {   position: absolute;   left: 0; top: 0;   right: 0; bottom: 0;  overflow: auto; }

<div ID='wrap'>  <div ID='item-1'>    If this gets longer,right most follows<br>    If this gets longer,right most follows<br>  </div>  <div ID='item-2'>    <div ID='item-wrap'>  I would like this text to have a scrollbar,and thus not take up more height than the orange Box.<br>  </div> </div></div>

总结

以上是内存溢出为你收集整理的html – 限制flexbox项目的高度全部内容，希望文章能够帮你解决html – 限制flexbox项目的高度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。