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?

Answer 1

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>

Answer 2

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

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