html - flex 盒元素的极限高度

This question already has an answer here:

Create a row of flexbox items with a max height defined by one child [duplicate]

(1个答案)


4年前关闭。




我有一个带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> 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> 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> 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，但是对于我来说，答案似乎不起作用。

最佳答案

添加具有position: absolute的包装器

现在，您可以在最左侧设置min-height，最右侧的高度将随之变化。

#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>
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
    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> 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> 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> 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>
</div>

关于html - flex 盒元素的极限高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40407222/