How can I create a horizontally scrollable content with fixed width inside a nested flex container?

Question

I have some content in a nested column whose parent is a nested flex container:

body,
html,
.container {
  height: 100%;
}

body {
  color: #fff;
}

.container {
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 200px;
  flex-shrink: 0;
  background: red;
}

.main {
  flex: 1;
  display: flex;
}

.content {
  flex: 1;
  background: blue;
}

.scroll {
  overflow-x: auto;
}

.overflowing {
  width: 1024px;
}

.panel {
  width: 100px;
  flex-shrink: 0;
  background: green;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="main">
    <div class="content">
      <div class="scroll">
        <div class="overflowing">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lorem blandit, aliquet augue in, egestas risus. Curabitur sit amet justo eget metus faucibus sodales. Vestibulum rhoncus vel libero id imperdiet. Quisque ante quam, tempus in metus a, aliquam sollicitudin tortor. Nam in sagittis nunc, et feugiat augue. Phasellus augue lacus, maximus et ipsum ac, placerat tincidunt risus. Curabitur velit diam, fermentum ac quam eget, ultricies elementum ipsum. Nullam justo dolor, consequat porttitor semper a, eleifend vitae ante. Phasellus egestas dolor sed erat dapibus, a scelerisque dui sagittis. Pellentesque eget venenatis nisi. Vestibulum neque nisl, cursus ut sagittis a, ultrices ac nunc. Etiam auctor nunc porta leo fermentum, a iaculis leo vestibulum. Donec lobortis, tellus a aliquet malesuada, ipsum elit sagittis lectus, sed mollis magna diam eu mauris. Vivamus semper nunc eget nunc lacinia pharetra.</div>
      </div>
    </div>
    <div class="panel"></div>
  </div>
</div>

The content has to be fixed-width (for whatever reason). On narrower viewports (like the one in the preview above) it's wider than its container, so I want it to scroll horizontally. I thought it would be as easy as wrapping it in a <div> with overflow-x: auto, but for some reason the content is pushing the right panel off-screen (you can see the panel if you view the result in full-screen).

This seems to happen only if the flex container is nested and the content's width is fixed. How can I prevent the panel from being pushed away?

score 2 · Accepted Answer · edited May 23 '17 at 12:17

Updated Answer

The original answer to this question is unnecessarily complex.

The simple truth is that flex items, by default, are min-width: auto. This means they cannot shrink below the size of their content.

That's why a horizontal scroll bar doesn't render in the blue text element. The content is unable to overflow because the item is always expanding to accommodate its content.

The solution is to override min-width: auto with min-width: 0.

.main {
   min-width: 0; /* NEW */
}

.content {
   min-width: 0; /* NEW */
}

jsFiddle demo

More details here: Why doesn't flex item shrink past content size?

Original Answer

~~The problem you're describing in your question doesn't exist in Chrome 47 or IE11. The code preview, whether small or full-screen, shows all three panels and horizontal scroll. It does what you want.~~

In Firefox and Chrome 48, however, there's clearly a problem. There's no horizontal scroll, and the right panel (green), is pushed off screen in the small preview.

These are bugs in Firefox and Chrome 48.

Here's the fix:

To enable a horizontal scrollbar in flexbox in FF/Chrome 48 add min-width: 0; to the parent(s) of the scrolling items.
(optional) To enable a vertical scrollbar add min-height: 0.

The above is a cross-browser solution; it doesn't appear to have any effect on non-buggy browsers. Hence, adding both min-width: 0 and min-height: 0 to your production code should be okay.

body,
html,
.container {
  height: 100%;
}

body {
  color: #fff;
}

.container {
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 200px;
  flex-shrink: 0;
  background: red;
}

.main {
  flex: 1;
  display: flex;
  min-width: 0;             /* NEW */
}

.content {
  flex: 1;
  background: blue;
  min-width: 0;             /* NEW */
}

.scroll {
  overflow-x: auto;
}

.overflowing {
  width: 1024px;
}

.panel {
  width: 100px;
  flex-shrink: 0;
  background: green;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="main">
    <div class="content">
      <div class="scroll">
        <div class="overflowing">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non lorem blandit, aliquet augue in, egestas risus. Curabitur sit amet justo eget metus faucibus sodales. Vestibulum rhoncus vel libero id imperdiet. Quisque ante quam, tempus in metus a, aliquam sollicitudin tortor. Nam in sagittis nunc, et feugiat augue. Phasellus augue lacus, maximus et ipsum ac, placerat tincidunt risus. Curabitur velit diam, fermentum ac quam eget, ultricies elementum ipsum. Nullam justo dolor, consequat porttitor semper a, eleifend vitae ante. Phasellus egestas dolor sed erat dapibus, a scelerisque dui sagittis. Pellentesque eget venenatis nisi. Vestibulum neque nisl, cursus ut sagittis a, ultrices ac nunc. Etiam auctor nunc porta leo fermentum, a iaculis leo vestibulum. Donec lobortis, tellus a aliquet malesuada, ipsum elit sagittis lectus, sed mollis magna diam eu mauris. Vivamus semper nunc eget nunc lacinia pharetra.</div>
      </div>
    </div>
    <div class="panel"></div>
  </div>
</div>

Bug reports:

How can I create a horizontally scrollable content with fixed width inside a nested flex container?

1 Answers1