Child elements of min-height parent is not respecting 100% height of parent

Question

I'm attempting to create a 2 column layout, with a header and footer. I want the page to initially be full height (100vh), with the ability to expand its height if the content was long.

Here's a CodePen showing part of what I'm attempting to achieve: https://codepen.io/realslimsutton/pen/eYWzavw

The problem with the above CodePen, is that its height is fixed to 100vh. If I change the height of the container to be min-height: 100vh; instead of height: 100vh;, then the 2 columns reset their height back to 0.

An example of it not working with min-height set can be found at this CodePen: https://codepen.io/realslimsutton/pen/xxdONjO.

I've already tried the following things:

• height: 100%; on all child elements of .container .content
• align-self: stretch; on all child elements of .container .content
• align-items: stretch; on all parent elements inside .container .content

None of the above attempts worked, the columns never filled the height of the parent.

Answer 1

Changed only a couple things. Don't forget the default is display: block

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

.container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container > .header, .container > .footer {
  height: 10vh;
  width: 100%;
}

.container .header {
  background-color: rgb(239, 68, 68);
}

.container .footer {
  background-color: rgb(59, 130, 246);
}

.container .content {
  /*Line added since the default is block it wasn't working with 
   flex grow*/
  display: flex;
  flex-grow: 1;
}

.container .grid {
  /*Now that your content "grows" you can inherit its height*/
  height: inherit;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.container .grid > div {
  height: 100%;
  width: 100%;
}

.container .grid .left, .container .grid .right {
  height: 100%;
  width: 100%;
}

.container .grid .left {
  background: rgb(16,185,129);
}

.container .grid .right {
  background: rgb(139,92,246);
}

<div class="container">
  <div class="header"></div>
  <div class="content">
    <div class="grid">
      <div>
        <div class="left">
        </div>
      </div>
      <div>
        <div class="right">
        </div>
      </div>
    </div>
  </div>
  <div class="footer"></div>
</div>