nimal_sadu nimal_sadu - 6 months ago 26
CSS Question

overflow: scroll not working on flex items

I have three div's.


  • Div 01

  • Div 02 - Fix Width

  • Div 03



Div 02 should be 300px. Other div 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.



HTML

<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>


CSS

.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;
}


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;
}

.middle {
    /* width: 300px; */
    flex: 0 0 300px;
    background: aqua;
}
<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>