具有隐藏溢出子级的流根替代

Question

我有一个div位于两个浮动元素之间，并通过在overflow:hidden上设置.middle-select来占用剩余空间。问题是，在该div内部，我有一些元素需要溢出，因此我将.positionRelative设置为position:relative。

<div class="noLink panel panel-default">
    <label class="floated-label">label</label>

    <div class="floated-stuff">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </div>

    <div class="positionRelative">
        <div class="middle-select">
<!-- overflowing stuff-->
      </div>
    </div>
</div>

问题在于positionRelative元素占据panel的整个宽度，而不是仅占据middle-select的宽度。在display:flow-root上使用positionRelative可以解决此问题，但是是否有更兼容浏览器的解决方案？ See example here