How to use flex inside fieldset without breaking 100% width

Question

I have a simple layout with a menu on the left and contents on the right.

The left side expands as the menu items get wider and the right side contents should take up the rest of the space. The problem I am having is with the right contents. If they are placed inside a fieldset tag they break beyond the bounds of the 100% width.

<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>

I've played around with the overflow and display to no avail.

Answer 1

Upon further checking it appears that fieldset auto expands. So you have to use

.section fieldset{
    min-width: 0;
}