偶然遇见一个奇怪的嵌套Flex问题,当子Flex元素里面的内容宽度过大时,即使指定了overflow:auto
,仍然会撑开父元素,导致布局乱掉。一个简单的示例如下:
HTML如下:
<div class="main"<div class="left"Sidebar</div<div class="right"<div class="label"Label
</div<div class="overflow"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div</div</div
CSS如下:
.main {
display: flex;
width: 100%;
}
.left
…