CODEWITHSUNDEEP
cssflexbox
Drkawashima
Drkawashima

Reputation: 9772

Flexbox set min-height despite height of contents

I have a 2 column flexbox layout. The items in the columns use flex:1 and I've only set their height using min-height. The idea is that both columns should always be of equal heigh. When colA is shorter than colB, the child-items of colA stretch to fill the avaliable height. When colA is taller than colB, the items of colB are as tall as their min-height.

The problem is that, as usual with css, if I have an element with min-height: 100px but fill it with contents which is 500px tall, that min-height will never be used, the effective min-height will be the height of the contents.(500px).

The question is : is there any way in flex make items collapse to their min-height despite the height of their contents? I have an elements with overflow-y:scroll; min-height: 100px. I want to fill it with a bunch of contents without it expanding beyond 100px height unless it's parents column requires it to expand.

Updated with example https://jsbin.com/gicirabufe/1/edit?html,css,output

Upvotes: 3

Views: 6517

Answers (1)

Asons
Asons

Reputation: 87191

Updated

Here is a start for you.

The scroll element is necessary to be able to solve the scrolling you are looking (flex itself has some flaws making that not possible without)

item2 is now set to only use as much space as its content, and this is as well needed or else the scroll won't kick properly on item1.

I added min-height: 80px; to item1, so when the content in item2 gets bigger, it doesn't collapse totally. Play with that min-height value to fit your needs the best.

html, body{
  height: 100%;
}
.flex{
  display: flex;
}
.left {
  flex: 1;
  min-height: 100px;
  border: 1px solid black;
}
.right {
  flex: 1;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.item1 {
  flex: 1;
  background: lime;
  position: relative;
  min-height: 80px;
}
.item2 {
  flex: 0;
  background: yellow;
}

.scroll {  
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
<div class="flex">
  <div class="left">
    Bla<br>
    Bla<br>
    Bla<br>
    Bla<br>
    Bla<br>
    Bla<br>
    Bla<br>
    Bla<br>
    Bla<br>
    Bla<br>
  </div>
  <div class="right">
    <div class="item1">
      <div class="scroll">
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
      </div>
    </div>
    <div class="item2">
      Bla 2<br>
    </div>
  </div>  
</div>

<br>

<div class="flex">
  <div class="left">
    Bla<br>
  </div>
  <div class="right">
    <div class="item1">
      <div class="scroll">
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
        Bla 1<br>
      </div>
    </div>
    <div class="item2">
      Bla 2<br>
    </div>
  </div>  
</div>

Upvotes: 1

Related Questions