CODEWITHSUNDEEP
htmlcssflexbox
Alin Apetrei
Alin Apetrei

Reputation: 106

CSS FlexBox prevent child from growing

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>

Upvotes: 3

Views: 2401

Answers (1)

Zach Jensz
Zach Jensz

Reputation: 4078

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>

Upvotes: 1

Related Questions