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.

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

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

**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: 
This [fiddle](https://jsfiddle.net/ank60d7x/) can help you!
To make `overflow:scroll` work use the below attributes:

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

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

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

```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. This is a sample text.
  </div>
  <div class="middle">sd</div>
  <div class="flex-item">sd</div>
</div>
```