Maximum width on fieldset flex item not honored

Question

I have a flex layout that puts two fieldsets side-by-side.

I want the fieldsets to equally divide the space, even when one of them has non-wrapping content that is too wide. (It should be hidden.)

All the searches I've performed on this issue indicate that the flex children need to have a max-width applied. This does not work in my case (shown in the snippet below, and echoed on CodePen).

Why is the fieldset growing past 50% width? How do I get the fieldset to hold at 50% wide, and the list of items to be cropped inside the ul?

* { box-sizing:border-box }
#content {
    display:flex;
}
fieldset {
    flex: 1;
    max-width:50%;
}
#items {
    list-style-type:none;
    white-space:nowrap;
    overflow:hidden;
    max-width:100%;
}
#items li {
    display:inline-block;
    width:100px; height:90px;
    background: yellow;
    text-align:center;
    line-height:90px;
}

<div id="content">
    <fieldset id="left"><legend>SECTION 1</legend>
    </fieldset>        
    <fieldset id="right"><legend>SECTION 2</legend>
        <ul id="items">
            <li>AAA</li>
            <li>BBB</li>
            <li>CCC</li>
            <li>DDD</li>
            <li>EEE</li>
            <li>FFF</li>
            <li>GGG</li>
            <li>HHH</li>
            <li>III</li>
            <li>JJJ</li>
            <li>KKK</li>
            <li>LLL</li>
            <li>MMM</li>
            <li>NNN</li>
            <li>OOO</li>
        </ul>
    </fieldset>
</div>