Set full height of main container-CodePudding

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 >
  <div >
  </div>
  <div >
  </div>
</div>

CodePudding user response：

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 >
  <div >
  </div>
  <div >
  </div>
</div>