Set full height of main container

Question

I have a wrapper and inside I have 2 divs (left & right). The wrapper takes the height of its content. The left div has a set relative height. What I want is for div right to take 100% of the wrapper height after div left has stretched the wrapper height. How can I achieve this? Thanks in advance.

.wrapper {
  width: 100%;
  height: fit-content;
  background-color: gold;
  border:solid 1px red;
}

.wrapper .left {
  width: 50%;
  height: 20vh;
  background-color: pink;
}

.wrapper .right {
  width: 50%;
  /*something like this*/
  height: 100%;
  background-color: blue;
}

<div class="wrapper">
  <div class="left">
  </div>
  <div class="right">
  </div>
</div>

@DCR it doesn't. class ```right``` isn't taking full height of class ```wrapper``` — seriously, Jul 24 '22 at 20:46
@DCR like how? see the blue part on the answer below do you see it when you run my code? — seriously, Jul 24 '22 at 21:27

score 1 · Accepted Answer · answered Jul 24 '22 at 21:08

1

Couple of things here,

Firstly, I am not sure if you actually meant for your right div to be on the right column. As of now, it's rendered below the left.

I assume that's what you wanted, so I'll suggest a fix it accordingly.

Other than that, I think you have the right idea.

Additionally, you do not need the fit-content.

Please let me know if I am missing something.

  

.wrapper {
  width: 100%;
  background-color: gold;
  border:solid 1px red;
  display: flex;
  flex-direction: row;
}

.wrapper .left {
  width: 50%;
  height: 20vh;
  background-color: pink;
}

.wrapper .right {
  width: 50%;
  background-color: blue;
}

<div class="wrapper">
  <div class="left">
  </div>
  <div class="right">
  </div>
</div>

answered Jul 24 '22 at 21:08

dotdeb

126
1
8

yeah this works perfect. Forgot to use ```flex-direction: row``` but never thought not assigning a height will make the div take full height. Thanks for the help. – seriously Jul 24 '22 at 21:13
Not assigning height results in `auto` height by default so it works as expected. However, instead of using `height: 100%` you could use `min-height: 100%` to achieve the same result. – dotdeb Jul 24 '22 at 21:26
@doteb yeah thats one option too. – seriously Jul 24 '22 at 21:28
1

Here's a very nice SO answer on a similar topic: https://stackoverflow.com/a/31728799/8031058 – dotdeb Jul 24 '22 at 21:30

Set full height of main container

1 Answers1