How to set flexbox child to parent height(100%) when i have only 2 child

Question

I am trying to add 100% height to my flex childs. it's not working. I know that i give direction as row but some time i have only 2 child where i need to set 100% height.

Is it possible? if so what is the correct way to do it?

here is my try:

*{
  padding:0;
  margin:0;
}

.parent{
  display:flex;
  height:100%;
  background:lightgray;
  border:1px solid red;
  flex-direction:row;
}

.child1{
  flex:0 0 30%;
  overflow-y: auto;
  background:lightblue;
}
.child2{
  flex:0 0 70%;
  overflow-y: auto;
  background:lightyellow;
}

<div class="parent">
  <div class="child1">child1</div>
  <div class="child2">child2</div>
</div>

Live Demo

Utsav Patel · Answer 1 · 2020-04-22T06:11:56.820

1

You have set the parent height as 100%.

You would have to set the height with some absolute unit.

Check below snippet with 100vh

*{
  padding:0;
  margin:0;
}
header{
  height:100px;      
  background:gray;
}
.parent{
  display:flex;
  height:calc(100vh - 65px);
  background:lightgray;
  border:1px solid red;
  flex-direction:row;
}

.child1{
  flex:0 0 30%;
  overflow-y: auto;
  background:lightblue;
}
.child2{
  flex:0 0 70%;
  overflow-y: auto;
  background:lightyellow;
}

<header>
  <h2>Header goes here</h2>
</header>
<div class="parent">
  <div class="child1">child1</div>
  <div class="child2">child2</div>
</div>

edited Apr 22 '20 at 06:11

answered Apr 22 '20 at 05:38

Utsav Patel

2,789
1
16
26

I agree with you. but I have a header as unknown size. it's a popup. even i tried as `height:calc(100vh-65px)` - not works. – 3gwebtrain Apr 22 '20 at 05:39
Can you add the popup implementation to your code above? – Utsav Patel Apr 22 '20 at 05:43
@3gwebtrain I have updated my answer, it works with calc. Please check – Utsav Patel Apr 22 '20 at 06:12
I am sorry, I am looking to prevent the scroll bar. Since it's a modal popup. – 3gwebtrain Apr 22 '20 at 06:48

How to set flexbox child to parent height(100%) when i have only 2 child

1 Answers1