Problem with flexbox layout and nested scrollbar

Question

Embedded scroll bars do not work within a simple flexbox container. The browser automatically displays the horizontal scroll bar.

What am I doing wrong on this simple example?

When I remove "display: flex;" on the flexContainer, the embedded scrollbar works. Of course, my entire layout is then destroyed.

I only found the following, but the solution relates to a vertical scrollbar and does not work here: Stackoverflow nesting-flexbox-inside-flexbox-overflow-how-to-fix-this

.flexContainer {
  display: flex;
}

.sidebar {
  flex: 1 0 auto;
  min-width: 150px;
  max-width: 190px;
  color: white;
  background: blue;
}

.content {
  flex: 1 0 auto;
  background: green;
}

.scrollableElement {
  display: flex;
  overflow-x: scroll;
}

.textElement {
  color: white;
  background: grey;
}

<html>
  <body>
    <div class="flexContainer">
      <div class="sidebar">
        <div>Sidebar</div>
      </div>
      <div class="content">
        <div class="scrollableElement">
          <div class="textElement">
            <div>Content11111111111111111111111111111111111111111111111111111111111111111111111</div>
            <div>Content22222222222222222222222222222222222222222222222222222222222222222222222</div>
            <div>Content33333333333333333333333333333333333333333333333333333333333333333333333</div>
            <div>Content44444444444444444444444444444444444444444444444444444444444444444444444</div>
            <div>Content55555555555555555555555555555555555555555555555555555555555555555555555</div>
            <div>Content66666666666666666666666666666666666666666666666666666666666666666666666</div>
            <div>Content77777777777777777777777777777777777777777777777777777777777777777777777</div>
            <div>Content88888888888888888888888888888888888888888888888888888888888888888888888</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

You can adapt the vertical solution to horizontal layout. Overflow-y will not work on horizontal layout, but there is an equivalent horizontal property. — Félix Adriyel Gagnon-Grenier, Nov 04 '20 at 15:59
Thank you for your quick response. With 'overflow-x: auto' on the flexContainer, the browser scrollbar is no longer displayed, but the scrollbar of the flexContainer is displayed. Actually, however, the scrollableElement scrollbar should be used. — Volker Fried, Nov 04 '20 at 16:13

score 2 · Accepted Answer · answered Nov 04 '20 at 16:57

You need to allow .content to shrink then add min-width:0 or overflow:hidden so its size is calculated at screen inside its parent so overflow works on the children:

.content {
  flex: 1 1 auto;/* updated*/
  background: green;
  min-width:0;/* added */
}

.flexContainer {
  display: flex;
}

.sidebar {
  flex: 1 0 auto;
  min-width: 150px;
  max-width: 190px;
  color: white;
  background: blue;
}

.content {
  flex: 1 1 auto;
  background: green;
  min-width:0;
}

.scrollableElement {
  display: flex;
  overflow-x: scroll; 
}

.textElement {
  color: white;
  background: grey;
}

<html>
  <body>
    <div class="flexContainer">
      <div class="sidebar">
        <div>Sidebar</div>
      </div>
      <div class="content">
        <div class="scrollableElement">
          <div class="textElement">
            <div>Content11111111111111111111111111111111111111111111111111111111111111111111111</div>
            <div>Content22222222222222222222222222222222222222222222222222222222222222222222222</div>
            <div>Content33333333333333333333333333333333333333333333333333333333333333333333333</div>
            <div>Content44444444444444444444444444444444444444444444444444444444444444444444444</div>
            <div>Content55555555555555555555555555555555555555555555555555555555555555555555555</div>
            <div>Content66666666666666666666666666666666666666666666666666666666666666666666666</div>
            <div>Content77777777777777777777777777777777777777777777777777777777777777777777777</div>
            <div>Content88888888888888888888888888888888888888888888888888888888888888888888888</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

thanks, it also worked in my complete layout. Saved me a lot of time — Volker Fried, Nov 04 '20 at 21:30

Glen Carpenter · Answer 2 · 2020-11-04T16:31:08.257

0

Your flex container has no set width, so it is taking up the entire width of the screen.

You could try setting the width to achieve the behavior you are looking for, for example:

.flexContainer {
  display: flex;
  width: 500px;
}

OR you could set the width of the .scrollableElement to resize based on the screen:

.scrollableElement {
  overflow-x: scroll;
  width: 65%;
}

edited Nov 04 '20 at 16:31

answered Nov 04 '20 at 16:18

Glen Carpenter

392
2
9

thxs for answer. The flexContainer should not have a fixed width so that the layout is responsive. – Volker Fried Nov 04 '20 at 16:23
1

Just added another option for responsive behavior – Glen Carpenter Nov 04 '20 at 16:31
@GlenCarpenter 65% width is still fixed, it couldn't become, say, 58%. – Félix Adriyel Gagnon-Grenier Nov 04 '20 at 16:40
It's not exactly 'fixed' in the same way '500px' would be, it will resize when the screen size changes. – Glen Carpenter Nov 04 '20 at 16:41
I know. It does not qualify as "responsive", is what I am trying to say. For instance, it can't work with the min-width / max-width used in OP's example. – Félix Adriyel Gagnon-Grenier Nov 04 '20 at 16:49

Problem with flexbox layout and nested scrollbar

2 Answers2