CODEWITHSUNDEEP
htmlcssflexboxangular5
Trungi
Trungi

Reputation: 57

CSS flex layout and overflow: auto child

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!

Upvotes: 1

Views: 150

Answers (2)

Asons
Asons

Reputation: 87191

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

<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

<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

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

Upvotes: 3

Andrei Fedorov
Andrei Fedorov

Reputation: 3977

div {
  border: 1px solid;
  min-height: 40px;
  min-width: 40px;
  padding: 8px;
  box-sizing: border-box;
}

#second>div>div {
  background-color: yellow;
}
<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>

Upvotes: 0

Related Questions