CSS FlexBox prevent child from growing

user_10509070 0
Viewed 174

Is it possible to prevent the yellow child growing and to take just 50% from parent (like the green takes, because has no content), using just flex properties (grow, shrink, basis)?

Parent has flex-direction: column and both of the children have flex-basis: 50%

I know that a fast solution is to set on yellow child height: 50% and overflow: auto to trigger the scrollbar, but I wanted to achieve that without using the height property.

Illustration of the problem

body{
  margin: 0;
}
.parent{
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.parent div:first-child{
  background-color: yellow;
  flex-basis: 50%;
  width: 200px;
}
.parent div:last-child{
  background-color: blue;
  flex-basis: 50%;
  width: 200px;
}
<div class="parent">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
  </div>
  <div>
 
  </div>
</div>

flexbox css html
1 Answers

Is it possible to prevent the yellow child growing and to take just 50% from parent (like the green takes, because has no content), using just flex properties?

No.
There are no flex properties that would allow you to solve this issue. The flexbox layout mode takes into account the content of its children and like most CSS does, it will try its best to make content visible.

If you want your yellow box to only take up 50% height you have to decide what will happen to the content that will have no room. Below is one example where setting overflow-y: scroll allows the box to reveal the remaining content while still being only 50% height.

body{
  margin: 0;
}
.parent{
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.parent div:first-child{
  background-color: yellow;
  flex-basis: 50%;
  width: 200px;
  overflow-y: scroll;
}
.parent div:last-child{
  background-color: blue;
  flex-basis: 50%;
  width: 200px;
}
<div class="parent">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat non magna sit amet sagittis. Praesent auctor sed risus vitae dapibus. Aliquam ex purus, fa
  </div>
  <div>
 
  </div>
</div>

user_141905430
Related