title: Flow-root alternative with Hidden Overflow child
body: <p>I have a div that sits between two floated elements and takes up the remaining space by setting <code>overflow:hidden</code> on <code>.middle-select</code>. The issue is, inside of that div I have elements that need to be overflowed, so I set <code>.positionRelative</code> to <code>position:relative</code>.  </p>
  
  <pre><code>&lt;div class="noLink panel panel-default"&gt;
      &lt;label class="floated-label"&gt;label&lt;/label&gt;
  
      &lt;div class="floated-stuff"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="positionRelative"&gt;
          &lt;div class="middle-select"&gt;
  &lt;!-- overflowing stuff--&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The issue is that the <code>positionRelative</code> element takes up the entire width of the <code>panel</code>, rather than only taking up only the width of <code>middle-select</code>. Using <code>display:flow-root</code> on <code>positionRelative</code> fixes that issue, but is there a more browser-compatible solution? <a href="https://www.bootply.com/kW0Jsugssq" rel="nofollow noreferrer">See example here</a></p>