overflow:scroll not working on flex items

Question

I have three div's:

Div 01
Div 02 - fixed width 300px
Div 03

Div 01 and Div 03 should be same width.

Example:

If viewport is 1000px, Div 01 width=350px and Div 03 width=350px,
If viewport is 800px, Div 01 width=250px and Div 03 width=250px.

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.flex-item {
  background: red;
  flex: 1 auto;
  height: 400px;
}
.middle {
  background: blue;
  width: 300px;
}

<div class="flex-container">
  <div class="flex-item">This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.</div>
  <div class="middle">sd</div>
  <div class="flex-item">sd</div>
</div>

This is work as I want. But I need to add overflow: scroll to flex-item class.

After adding this, it does not work. How to solve it?

Michael Benjamin · Accepted Answer · 2016-05-30 19:19:50Z

If you want Div 01 and Div 03 to be the same width, then flex: 1 auto is not a reliable tool. The flex-grow: 1 component will size the flex item based on the available space in the container, which could vary. You need to define a width for the flex-item class.

For the flex items to scroll vertically, you need to specify a height or flex-basis (when flex-direction is column).

For the flex items to scroll horizontally, you need to specify width or flex-basis (when flex-direction is row). You also need to add white-space: nowrap.

.flex-container {
    display: flex;
    width: 1000px;
}

.flex-item {
    /* flex: 1 auto; */
    flex: 0 0 350px;
    overflow-x: scroll;
    white-space: nowrap;
    background: red;
    height: 400px;
}

.middle {
    /* width: 300px; */
    flex: 0 0 300px;
    background: aqua;
    height: 400px;
}

<div class="flex-container">
  <div class="flex-item">This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.</div>
  <div class="middle">sd</div>
  <div class="flex-item">sd</div>
</div>

Alaa · Accepted Answer · 2018-12-17 01:00:09Z

14

This fiddle can help you! To make overflow:scroll work use the below attributes:

flex-grow: 1;
flex-basis:0;

edited Dec 17, 2018 at 1:00

Alaa

12512 bronze badges

answered May 25, 2016 at 17:47

Alejandro Garrido

5651 gold badge4 silver badges16 bronze badges

1 Comment

Ali Bayat Mokhtari Apr 21 at 20:57

Saved my day and works like a charm.

Yunnosch · Accepted Answer · 2023-12-23 06:14:25Z

8

In a similar issue, where the scroller was not visible, the reason for that was justify-content: flex-end.
Once I removed it the code started working as expected.

edited Dec 23, 2023 at 6:14

Yunnosch

26.8k9 gold badges46 silver badges66 bronze badges

answered Jun 5, 2023 at 12:03

Mohammed Yousuff

3461 gold badge3 silver badges12 bronze badges

3 Comments

Jake Smith Over a year ago

@Yunnosch, I had this issue, and I finally stumbled across this answer and it DID answer the question, at least for me. Thank you Mohammed Yousuff

Jake Smith Over a year ago

@Yunnosch, I do see a answer here. You are right, the original question has justify-content set to space-around. However, if you only change justify-content to flex-end, which is VERY similar to the original question, the other solutions don't have the same effect. I understand that this could be extracted out to another question technically, but this answer to a very slight variation of the original question was very helpful to me, so I thought I'd leave a comment, as you suggest, for others that may follow the same path I did to find it.

Yunnosch Over a year ago

@JakeSmith Ok, thanks for that input, I needed it because I myself am not that knowlegeable on this topic. Please keep that comment up, even if I delete my comments (inclduing this one after some time....).

glevoux · Accepted Answer · 2016-05-25 16:52:19Z

0

When you use flexbox all your div need to be in the flex flow.

So you better use flex: 1 1 300px instead of width: 300px

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background:red;
  flex: 1 1 0px;
  height: 200px;
  overflow: scroll;
}

.middle {
  background:blue;
  flex: 1 1 300px;
}

<div class="flex-container">
  <div class="flex-item">
   This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
  </div>
  <div class="middle">sd</div>
  <div class="flex-item">sd</div>
</div>

edited May 25, 2016 at 16:52

answered May 25, 2016 at 16:40

glevoux

161 silver badge4 bronze badges

Collectives™ on Stack Overflow

overflow:scroll not working on flex items

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related