CODEWITHSUNDEEP
cssflexbox
Jakub Kolčář
Jakub Kolčář

Reputation: 304

Flex in scrollable div wrong height

I have this flex container which does contain 2 columns. The contents of some of the columns is bigger then the conainers height thus the scrollbar is shown. This is ok.

However, when you scroll down the height of the background of the single columns is only as high as the containers heights and does not fill the entire height (below the top scroll position).

Is there a way to fix this so that the yellow and green background is down to the bottom of the columns?

Here is fiddle:

<div class="outer-container">
<div class="column-one">col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one</div>
<div class="column-two">col two</div>
</div>

.outer-container {
  border: 1px solid blue;
  height: 100px;
  overflow: auto;
  display: flex;
}

.column-one {
  flex: 0 0 auto;
  width: 80px;
  background: green;
}

.column-two {
  flex: 1 1 auto;
  background: yellow;
}

https://jsfiddle.net/ioma8/Lmo94q6q/4/

Upvotes: 0

Views: 1042

Answers (1)

VXp
VXp

Reputation: 12068

Just add another wrapper around the columns and display it as flex:

.outer-container {
  border: 1px solid blue;
  height: 100px;
  overflow: auto;
  /*display: flex; not necessary*/
}

.flex-container {
  display: flex;
}

.column-one {
  flex: 0 0 80px;
  background: green;
}

.column-two {
  flex: 1 1 auto;
  background: yellow;
}
<div class="outer-container">
  <div class="flex-container">
    <div class="column-one">col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one col one</div>
    <div class="column-two">col two</div>
  </div>
</div>

Before, everything worked as expected, flex-items took the whole defined height of the parent element, which is what they do, by default. So any extra content won't make them higher than their flex parent and keep them equal in height. That's why you need to overflow the parent, not the children. This is the reason behind the additional wrapper.

Upvotes: 3

Related Questions