Flexbox: How to Combine percent, pixels and remaining height on columns?

Question

I'm building basic grid system and need to combine height of flex-items described in different size units, which are %, px and remaining space.

html:

<div class="grid">
  <div class="block" style="flex-basis: 50px;">50px</div>
  <div class="block" style="flex-basis: 25%;">25%</div>
  <div class="block">stretch to remaining space?</div>
  <div class="block" style="flex-basis: 50px;">50px</div>
</div>

css:

html,body,.grid {
  height: 100%;
  padding: 0;
  margin: 0;
}
.grid {
  width: 300px;
  background: #aaa;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

}
.block {
  outline: solid 1px black;
  flex-grow: 0; // remove growing proportion
  flex-shrink: 0; // remove shrinking proportion
}

working example: http://codepen.io/antraxis/pen/zxwgEo

score 21 · Accepted Answer · edited Apr 22 '16 at 11:08

21

Use the flex-grow parameter (the first one in the flex shorthand property) :

HTML :

<div class="grid">
  <div class="block a">block height 50px</div>
  <div class="block b">block height 25%</div>
  <div class="block c">block height *</div>
  <div class="block d">block height 50px</div>
</div>

CSS :

.block {
  outline: solid 1px black;
}
.a, .d {
  flex: 0 0 50px;
}
.b {
  flex: 0 0 25%;
}
.c {
  flex: 1 0 0;
}

codepen

edited Apr 22 '16 at 11:08

Community

1
1

answered Jan 22 '15 at 13:54

Denys Séguret

372,613
87
782
758

that's exactly what I tried too... setting grow for only one element. I'm not sure if that's a proper way to do it, but does it's job. – Dariusz Sikorski Jan 22 '15 at 13:57
1

Of course it's the proper way : you say that 3 elements doesn't grow (0) and that one should grow (1). – Denys Séguret Jan 22 '15 at 13:58

Flexbox: How to Combine percent, pixels and remaining height on columns?

1 Answers1