溢出：滚动不适用于弹性项目

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

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> 

Answer 3

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

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