How can I make a div 100% height inside block div with flex-grow 1 parent?

Question

I've searched and tried a lot of solutions but none of them is working for my case. I have this set up where neither body nor main should change. Inside them I can add as many divs as I want and change any style.

<div class="body">
  <div class="main">
    <div class="should-be-full-height">
      Content
    </div>
  </div>
</div>

.body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: auto;
  width: 100%;
  background-color: #CCC;
  border: 1px solid black;
}

.main {
  height: auto;
  flex-grow: 1;
  display: block;
  background-color: red;
  border: 1px solid white;
}

.should-be-full-height {
  background-color: grey;
  border: 1px solid black;
}

https://jsfiddle.net/eqwu3yfh/

I added background colors and borders just to see better what's going on. I need the div with the .should-be-full-height class to use 100% of the height of its parent (.main). How can I achieve that?

Thanks. Sorry if this has been asked, I couldn't find an answer.

Answer 1

You either remove flex-direction: column from body and you can use height:100%

.body {
  display: flex;
  /* flex-direction: column;*/
  min-height: 100vh;
  height: auto;
  width: 100%;
  background-color: #CCC;
  border: 1px solid black;
}

.main {
  height: auto;
  flex-grow: 1;
  display: block;
  background-color: red;
  border: 1px solid white;
}

.should-be-full-height {
  background-color: grey;
  border: 1px solid black;
  height: 100%;
}

<div class="body">
  <div class="main">
    <div class="should-be-full-height">
      Hi
    </div>
  </div>
</div>

Or you change the display of main to be flex and use width: 100%

.body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: auto;
  width: 100%;
  background-color: #CCC;
  border: 1px solid black;
}

.main {
  height: auto;
  flex-grow: 1;
  display: flex;
  background-color: red;
  border: 1px solid white;
}

.should-be-full-height {
  background-color: grey;
  border: 1px solid black;
  width: 100%;
}

<div class="body">
  <div class="main">
    <div class="should-be-full-height">
      Hi
    </div>
  </div>
</div>

I know you said you cannot change body and main but I don't see any other solution.