Question: I'm trying to create a layout:

```
<div style="display: flex; flex-direction: row;">

    <div id="first" style="flex: 1 1 200px;">...</div>

    <div id="second" style="">
       <div style="overflow: auto">
           <div style="min-width: 1000px"></div>
       </div>
    </div>

    <div id="third" style="flex: 1 1 600px;">...</div>

</div>

```

As you can see, I need a **three column layout** with **first and third column** in fixed size. The **second column** should occupy **rest of the space**.

The problem is that inside the **second column** I need to display a large data **table with optional scrollbar**.

Is there any way how to accomplish this using flexbox?

The problem with my code is, that `overflow: auto` never works if I'm not specifying width of `second` child and whole layout ends up with width of `1800px`. On the other side I cannot specify it because the `second` child is supposed to occupy rest of the space.

Thanks!

Answer: 
In this case, with the existing markup untouched, the main reason is `min-width`, which for flex items defaults to `auto` and prevent them (here the `second`) from being smaller than its content.

Adding `min-width: 0;` to its style `<div id="second" style="min-width: 0;">` will fix that.

Stack snippet

```html
<div style="display: flex; flex-direction: row;">

    <div id="first" style="flex: 1 1 200px;">...</div>

    <div id="second" style="min-width: 0;">
       <div style="overflow: auto;">
           <div style="min-width: 1000px; background: red;"> scrollabe</div>
       </div>
    </div>

    <div id="third" style="flex: 1 1 600px;">...</div>

</div>
```

---

IE, being somewhat buggy, also need `display: flex` added to the `second`'s style, and one doesn't need an IE css hack here, since this works on the other browsers too.

Stack snippet

```html
<div style="display: flex; flex-direction: row;">

    <div id="first" style="flex: 1 1 200px;">...</div>

    <div id="second" style="display: flex; min-width: 0;">
       <div style="overflow: auto;">
           <div style="min-width: 1000px; background: red;"> scrollabe</div>
       </div>
    </div>

    <div id="third" style="flex: 1 1 600px;">...</div>

</div>
```

---

So finally, when the content in the `second` is smaller and should in such cases fill the remaining space, it will also need `flex-grow: 1`.

Stack snippet

```html
<div style="display: flex; flex-direction: row;">

    <div id="first" style="flex: 1 1 200px;">...</div>

    <div id="second" style="flex-grow: 1; display: flex; min-width: 0;">
       <div style="overflow: auto;">
           <div style="min-width: 1000px; background: red;"> scrollabe</div>
       </div>
    </div>

    <div id="third" style="flex: 1 1 600px;">...</div>

</div>
```
```css
div {
  border: 1px solid;
  min-height: 40px;
  min-width: 40px;
  padding: 8px;
  box-sizing: border-box;
}

#second>div>div {
  background-color: yellow;
}
```

```html
<div style="display: flex; flex-direction: row;">
  <div id="first" style="flex-basis: 100px;">...</div>
  <div id="second" style="flex: 1;">
    <div style="overflow: auto">
      <div style="min-width: 100px"></div>
    </div>
  </div>
  <div id="third" style="flex-basis: 300px;">...</div>
</div>
<br>
<div style="display: flex; flex-direction: row;">
  <div id="first" style="flex-basis: 100px;">...</div>
  <div id="second" style="flex: 1;">
    <div style="overflow: auto">
      <div style="min-width: 200px"></div>
    </div>
  </div>
  <div id="third" style="flex-basis: 300px;">...</div>
</div>
<br>
<div style="display: flex; flex-direction: row;">
  <div id="first" style="flex-basis: 100px;">...</div>
  <div id="second" style="flex: 1;">
    <div style="overflow: auto">
      <div style="min-width: 1000px"></div>
    </div>
  </div>
  <div id="third" style="flex-basis: 300px;">...</div>
</div>
```