如何在不破坏100%宽度的情况下在场集中使用flex

Question

我有一个简单的布局，左边是菜单，右边是内容。

左侧随着菜单项变宽而展开，右侧内容应占据其余空间。我遇到的问题是内容不对。如果它们被放置在字段集标记内，它们就会突破100%宽度的界限。

<entire_holder style="display:grid; grid-template-columns: max-content auto;">
<sub_holder1 id="menu" style="background:orange;">I should expand as much as needed!</sub_holder1>
<sub_holder2 id="main_content" style="background:yellow; display: flex; flex-direction:column; flex: 1; overflow: hidden;">

<fieldset style="display: flex; flex: 1; overflow: hidden; background:lime;" >
<legend>This fieldset should take up 100% of the space left, not more. </legend>
<div style="display:flex; background:pink; width:100%; overflow:scroll;">
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
</div>
</fieldset>

<fieldset style="display: flex; flex: 1; overflow: hidden; background:lime;" >
<legend>I work as expect, but this fieldset also isn't using a flexbox. </legend>
<div style="display:block; background:pink; width:100%; overflow:scroll;">
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
<div style="background:tan; min-width:200px; margin:10px; display:block;">200px</div>
</div>
</fieldset>     

</sub_holder2>
</entire_holder>

我一直在玩溢出和显示，但都无济于事。

Answer 1

进一步检查后，字段集似乎自动展开。所以你必须使用

.section fieldset{
min-width: 0;
}