CODEWITHSUNDEEP
htmlcssflexbox
php_nub_qq
php_nub_qq

Reputation: 16015

Funky flexbox heights

That's a pretty simple structure which I can not achieve using flexbox.

I have a header and a body elements within the body I have a long (in height) element and after that I have a small footer within the body. I want the content to be scrollable and the footer always visible.

I set everything to use flexbox and I use flex-direction: column to achieve vertical positioning as well as flex: 1 to occupy remaining space with elements with undefined height.

Weirdly enough, my header with fixed height of 50 pixels is only 20 pixels high and the content is not scrollable at all, or rather it is but along with the little footer (in green) which is not what I want...

DEMO HERE

.flex { display: flex; }
.flex1 { flex: 1; }
.col { flex-direction: column; }
.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
.yellow { background-color: yellow; }
.pad { padding: 10px 15px; }
.h50 { height: 50px; }
<div class="flex col" style="height: 100vh;">
  <div class="red h50">
    Wtf?
  </div>
  <div class="blue flex1 pad">
    <div class="flex col" style="height: 100%">
      <div class="yellow flex1" style="overflow: auto;">
        <div style="height: 1500px">
          Long content here
        </div>
      </div>
      <div class="green h50">
      
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 51

Answers (1)

Asons
Asons

Reputation: 87191

Combining Flexbox with inner elements using height with percent is not a good idea, as it will create issues cross browsers.

Use Flexbox all the way, here by updating these 2 elements classes, where I removed height: 100% and added flex to the blue so its child will fill its parent height, and flex1 to the child so it will fill its parent width.

  <div class="blue flex1 pad flex">
    <div class="flex flex1 col">

Also added margin: 0 to the body

Stack snippet

body { margin: 0; }
.flex { display: flex; }
.flex1 { flex: 1; }
.col { flex-direction: column; }
.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
.yellow { background-color: yellow; }
.pad { padding: 10px 15px; }
.h50 { height: 50px; }
<div class="flex col" style="height: 100vh;">
  <div class="red h50">
    Wtf?
  </div>
  <div class="blue flex1 pad flex">
    <div class="flex flex1 col">
      <div class="yellow flex1" style="overflow: auto;">
        <div style="height: 1500px">
          Long content here
        </div>
      </div>
      <div class="green h50">
      
      </div>
    </div>
  </div>
</div>

Updated based on a comment, where Firefox appear to need min-height: 0 on the blue element.

For flex items, their default min-height/width value is auto, which prevent them from shrinking below their content's size, so changing to 0 solves that.

Stack snippet

body { margin: 0; }
.flex { display: flex; }
.flex1 { flex: 1; }
.col { flex-direction: column; }
.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
.yellow { background-color: yellow; }
.pad { padding: 10px 15px; }
.h50 { height: 50px; }
.mh  { min-height: 0; }
<div class="flex col" style="height: 100vh;">
  <div class="red h50">
    Wtf?
  </div>
  <div class="blue flex1 pad flex mh">
    <div class="flex flex1 col">
      <div class="yellow flex1" style="overflow: auto;">
        <div style="height: 1500px">
          Long content here
        </div>
      </div>
      <div class="green h50">
      
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions