Child inside parent with min-height 100% not inheriting height.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    
    <div class="container">
      <div class="parent">
        <div class="content red">
          min-height: 100%;
        </div>
      </div>
    </div>
    <div class="container">
      <div class="parent working">
        <div class="content blue">
          min-height: 100%; height: 1px;
        </div>
      </div>
    </div>
    
  </body>

</html>

// Code goes here

/* Styles go here */

.container {
  height: 200px;
  margin-bottom: 10px;
}

.parent {
  min-height: 100%;
  border: 1px solid black;
}

.working {
  height: 1px;
}

.content {
  height: 100%;
  
}

.content.red {
  background-color: red;
}

.content.blue {
  background-color: blue;
}