flex 1 0 0 vs flex 4 0 0 doesnt take up 1 vs 4 ratio space for flex-flow column;

eguneys 0
Viewed 32

please kindly fix this.

.wrap {
  display: flex;
  flex-flow: column;
}

.one {
  background: yellow;
  flex: 1 0 0;
}

.four {
  background: red;
  flex: 4 0 0;
}
<div class="wrap">
  <div class="one">One</div>
  <div class="four">Four</div>
</div>

javascript css html
1 Answers

To fill the height, you need to add a min-height heigher than the default. By default, the height is calculated to fit-content.

body {
  margin: 0;
}

.wrap {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

.one {
  background: yellow;
  flex: 1 0 0;
}

.four {
  background: red;
  flex: 4 0 0;
}
<div class="wrap">
  <div class="one">One</div>
  <div class="four">Four</div>
</div>

tacoshy0
Related