nimal_sadu nimal_sadu - 6 months ago 25
CSS Question

overflow:scroll not working on flex items

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

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>