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
– Félix Adriyel Gagnon-Grenier, Commented Nov 4, 2020 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
– Volker Fried, Commented Nov 4, 2020 at 16:13

G-Cyrillus · Accepted Answer · 2020-11-04 16:57:19Z

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

Glen Carpenter · Accepted Answer · 2020-11-04 16:31:08Z

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 4, 2020 at 16:31

answered Nov 4, 2020 at 16:18

Glen Carpenter

4123 silver badges9 bronze badges

5 Comments

Volker Fried Over a year ago

thxs for answer. The flexContainer should not have a fixed width so that the layout is responsive.

Glen Carpenter Over a year ago

Just added another option for responsive behavior

Félix Adriyel Gagnon-Grenier Over a year ago

@GlenCarpenter 65% width is still fixed, it couldn't become, say, 58%.

Glen Carpenter Over a year ago

It's not exactly 'fixed' in the same way '500px' would be, it will resize when the screen size changes.

Félix Adriyel Gagnon-Grenier Over a year ago

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.

Collectives™ on Stack Overflow

Problem with flexbox layout and nested scrollbar

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related