1

Basically i want to have two panels side by side each taking up 50% of the width. The content should not be wrapped and if it takes up more width than is available, then the overflow should kick in. Nothing revolutionary.

I have recreated the following repro which shows things blowing up in Chrome. Basically the combination of the two outer divs also being flex means that the width blows out for some strange reason.

Not working - http://codepen.io/anon/pen/GjjLjA?editors=1100

.container {
  display: flex;
  width: 100%;
}
article {
  width: 50%;
  overflow: scroll;
}
li {
  white-space: nowrap;
}
<div style="display: flex; flex: auto;">
  <div style="display: flex; flex: auto;">
    <div class="container">
      <article>
        <ul>
          <li>Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8</li>
          <li>Accept-Encoding: gzip, deflate, sdch</li>
          <li>Accept-Language: en-US,en;q=0.8</li>
          <li>Cache-Control: no-cache</li>
          <li>Connection: keep-alive</li>
          <li>Content-Type: text/html</li>
          <li>Host: inventory.internal.com</li>
          <li>Pragma: no-cache</li>
        </ul>
      </article>
      <article>
        <ul>
          <li>Cache-Control: no-cache</li>
          <li>Content-Encoding: gzip</li>
          <li>Content-Type: text/html</li>
          <li>Date: Mon, 02 Nov 2015 06:39:26 GMT</li>
          <li>Server: inventory.internal.com</li>
          <li>Status: 200 OK</li>
          <li>Strict-Transport-Security: max-age=31536000; includeSubdomains; preload</li>
          <li>Transfer-Encoding: chunked</li>
          <li>Vary: Accept-Encoding</li>
         </ul>
      </article>
    </div>
  </div>
</div>

The following removes one of the outer divs and the content now splits normally and as expected.

Working - http://codepen.io/anon/pen/NRRmdX?editors=1100

.container {
  display: flex;
  width: 100%;
}
article {
  width: 50%;
  overflow: scroll;
}
li {
  white-space: nowrap;
}
<div style="display: flex; flex: auto;">
  <div class="container">
    <article>
      <ul>
        <li>Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8</li>
        <li>Accept-Encoding: gzip, deflate, sdch</li>
        <li>Accept-Language: en-US,en;q=0.8</li>
        <li>Cache-Control: no-cache</li>
        <li>Connection: keep-alive</li>
        <li>Content-Type: text/html</li>
        <li>Host: inventory.internal.com</li>
        <li>Pragma: no-cache</li>
      </ul>
    </article>
    <article>
      <ul>
        <li>Cache-Control: no-cache</li>
        <li>Content-Encoding: gzip</li>
        <li>Content-Type: text/html</li>
        <li>Date: Mon, 02 Nov 2015 06:39:26 GMT</li>
        <li>Server: inventory.internal.com</li>
        <li>Status: 200 OK</li>
        <li>Strict-Transport-Security: max-age=31536000; includeSubdomains; preload</li>
        <li>Transfer-Encoding: chunked</li>
        <li>Vary: Accept-Encoding</li>
      </ul>
    </article>
  </div>
</div>

Is this a bug in Chrome or am I missing something here about flexbox usage?

anthonyv
  • 2,455
  • 1
  • 14
  • 18
  • 1
    So it has something to do with the initial `min-width: auto` on flex items and how that is calculated when nested. [Changing `min-width` to 0 on the container and its parent makes it work as expected](http://codepen.io/anon/pen/Zppkdz?editors=1100) – misterManSam Sep 20 '16 at 06:04
  • As pointed out by @misterManSam, you need to add `min-width: 0` to the first nested div ([demo](http://codepen.io/anon/pen/ORbPEO?editors=1100)). By default, flex items cannot be smaller than the length of their content (`min-width: auto`). You can override the default with `min-width: 0` or changing the `overflow` to anything other than `visible`. More details in the duplicate. – Michael Benjamin Sep 20 '16 at 11:43
  • If you have nested divs using flexboxes like this, is it good practice to make sure that they all have `min-width: 0;`? – anthonyv Sep 20 '16 at 15:57

0 Answers0