I have three div's:
Div 01 and Div 03 should be same width.
Example:
.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?
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>