html - 限制 flexbox 元素的高度

标签 html css flexbox

<分区>

我有一个包含 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 - 限制 flexbox 元素的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40407222/

相关文章:

html - 我的 25% 宽度 flex 元素在包装后占用 100% 宽度

javascript - 函数不是从对象内部调用的

javascript - "Uncaught Error: View type "时间线日"is not valid"完整日历版本3.9.0

html - 表格显示和元素之间的相同空间

html - 如何在 html 中使用 colspan、rowspan 或 css 创建表格?

css - IE 11 和 Edge 中 Flexbox 的列表项对齐问题

php - Display flex 导致文本被拆分

html - float 和内联 block 元素上的省略号文本溢出

jquery - 如何使图像 slider 自动播放?

javascript - 如何将一张图像分成 9 个小图像(类似于拼图)