How can I make a nested scrollable container in a flexbox?

Question

I have a flexbox and inside nested several divs. In a deeper level is the main content (in yellow). I'd like to make it scrollable horizontally, but it only works if the divs between .flexbox and .content aren't there. So if the divs are there, overflow-x: scroll on the .content doesn't behave as I'd expect.

Can anyone explain that? What would a possible solution look like to create a nested scrollable container in a flexbox?

.flexbox {
 display: flex;
}

.content {
  background-color: yellow;
  height: 50px;
  color: black;
  overflow-x: scroll; 
  white-space: nowrap;
}

p {
  display: inline-block;
}

<div class="flexbox">
 <div> <!-- multiple nested divs like this one -->
   <div class="content"> <!-- finally content -->
      <p> I want to be able to scroll in here. </p>
      <p> Not in the whole page </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
   </div>
 </div>
</div>

give me a second to think about it, because the real example is a bit more complicated and not sure if I know the max-width, thanks for the comment! — Lyubomir, Jun 26 '17 at 23:40
yeah that's the best way to do it. submitted an answer with why that's needed. — Michael Coker, Jun 26 '17 at 23:54

score 1 · Answer 1 · answered Jun 26 '17 at 23:40

The problem is that your inner <div> elements are exceeding the width of the screen. I'd recommend setting a max-width: 100% on all <div> elements that come directly under the flexbox, so that they don't escape the bounds. This still allows you to keep the display: flex parent.

.flexbox {
 display: flex;
}

.content {
  background-color: yellow;
  height: 50px;
  color: black;
  overflow-x: scroll; 
  white-space: nowrap;
}

p {
  display: inline-block;
}

.flexbox > div {
  max-width: 100%;
}

<div class="flexbox">
 <div> <!-- multiple nested divs like this one -->
   <div class="content"> <!-- finally content -->
      <p> I want to be able to scroll in here. </p>
      <p> Not in the whole page </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
   </div>
 </div>
</div>

Hope this helps! :)

score 1 · Accepted Answer · answered Jun 26 '17 at 23:42

https://www.w3.org/TR/css-flexbox/#flex-common

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property.

You can use min-width: 0 or max-width: 100% on .flexbox > div.

.flexbox {
 display: flex;
}

.flexbox > div {
  min-width: 0;
}

.content {
  background-color: yellow;
  height: 50px;
  color: black;
  overflow-x: scroll; 
  white-space: nowrap;
}

p {
  display: inline-block;
}

<div class="flexbox">
 <div> <!-- multiple nested divs like this one -->
   <div class="content"> <!-- finally content -->
      <p> I want to be able to scroll in here. </p>
      <p> Not in the whole page </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
   </div>
 </div>
</div>

.flexbox {
 display: flex;
}

.flexbox > div {
  max-width: 100%;
}

.content {
  background-color: yellow;
  height: 50px;
  color: black;
  overflow-x: scroll; 
  white-space: nowrap;
}

p {
  display: inline-block;
}

<div class="flexbox">
 <div> <!-- multiple nested divs like this one -->
   <div class="content"> <!-- finally content -->
      <p> I want to be able to scroll in here. </p>
      <p> Not in the whole page </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
      <p> foo bar content </p>
   </div>
 </div>
</div>

How can I make a nested scrollable container in a flexbox?

2 Answers2