我有一个包含 2 个项目的弹性盒，方向=行。第二项的文字内容很长。我希望第二个项目与第一个项目一样高，并且有一个滚动条。这可能吗？
#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>
我找到的最接近的帖子是这个吗，但答案似乎不适用于我的情况。
添加一个包装器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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
