以百分比宽度的div溢出不起作用

Question

如果我给出一个div绝对宽度，那么溢出工作正常但如果我给出宽度百分比，溢出没有正确应用并将其旁边的元素推出屏幕。 JSFiddle：https://jsfiddle.net/mt9nrxxd/

<div id="contentContainer">
<div id="firstLevel">
<div id="firstChild">
<div id="excessWidth">
</div>
</div>
</div>
<div id="secondChild">
</div>
</div>

#contentContainer{
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    height: 50px;
    background: white;
}
#firstLevel{
    width: 100%
}
#firstChild{
    width:100%;
    height: 50px;
    overflow:auto;
    background: yellow;
}
#excessWidth{
   background: red;
   width:550px;
   height: 50px;
}
#secondChild{
   background: orange;
   height: 50px;
   min-width: 80px;
}