html flex 的高度,html – 限制flexbox项目的高度

最新推荐文章于 2024-04-03 00:34:38 发布

好好说gg 戈壁风

最新推荐文章于 2024-04-03 00:34:38 发布

阅读量256

点赞数

文章标签： html flex 的高度

本文介绍了一种使用绝对定位和Flex布局实现元素最小高度设置的方法，并通过添加滚动条来控制内容高度不超过指定区域，确保了布局的灵活性与美观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

添加一个位置为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;

}

If this gets longer, right most follows

I would like this text to have a scrollbar, and thus not take up more height than the orange box.
I would like this text to have a scrollbar, and thus not take up more height than the orange box.
I would like this text to have a scrollbar, and thus not take up more height than the orange box.
I would like this text to have a scrollbar, and thus not take up more height than the orange box.
I would like this text to have a scrollbar, and thus not take up more height than the orange box.
I would like this text to have a scrollbar, and thus not take up more height than the orange box.
I would like this text to have a scrollbar, and thus not take up more height than the orange box.