Expand divs in column layout to match original height of parent

Question

As the title specifies: I have a number of divs in a column layout, and I would like them to expand to match the original height of the parent.

The parent doesn't have a fixed height, as it is part of a flex-based page layout.

Is this possible? In the attached example, I would like both .child divs to be equal in height, and the same height as the original height of the parent.

I can believe that it is impossible based on the way that CSS works.

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.parent {
  flex: 1;
}

.child {
  border: 1px solid black;
}

<div class="container">
  <div class="header">Header</div>
  <div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
  </div>
  <div class="footer">Footer</div>
</div>

Answer 1

You may imbricate flex boxes.

body {
  margin: 0;
}

.container ,.parent{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.parent, .child {
  flex: 1;
  min-height:auto;
}

.child {
  border: 1px solid black;
}

<div class="container">
  <div class="header">Header</div>
  <div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
  </div>
  <div class="footer">Footer</div>
</div>

For the other part of the question : the same height as the original height of the parent. sibblings or parent of .container looks like missing to visualize how height is applied or comes from.

Could be something alike:

body {
  margin: 0;
}

.container,
.parent {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.parent {
  flex: 1;
  min-height: auto;
  overflow: auto;
}

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

* {
  box-sizing: border-box;
}

<div class="container">
  <div class="header">Header</div>
  <div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
  </div>
  <div class="footer">Footer</div>
</div>

---

edit , from comment

For chrome, A bit of js can used to set a usable min-height value for that browser (and others).

let MyParent  = document.querySelector('.parent');
let MyParentH = MyParent.offsetHeight;
MyParent.style.setProperty("--MyHeight", MyParentH +"px");

body {
  margin: 0;
}

.container,
.parent {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.parent {
  flex: 1;
  min-height: auto;
  overflow: auto;
}

.child {
  flex: 1;
  min-height: 100%;/* where var css is not supported */
   min-height:var(--MyHeight, 100%);
  border: 1px solid black;
}

* {
  box-sizing: border-box;
}

<div class="container">
  <div class="header">Header</div>
  <div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
  </div>
  <div class="footer">Footer</div>
</div>

Answer 2

Do you want something like that?

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.parent {
  flex: 1;
  display: flex;
}

.child {
  border: 1px solid black;
}

<div class="container">
  <div class="header">Header</div>
  <div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
  </div>
  <div class="footer">Footer</div>
</div>

PS: Update my answer with comment advice

body {
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.parent {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.child {
  border: 1px solid black;
  flex-grow: 1;
}

<div class="container">
  <div class="header">Header</div>
  <div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
  </div>
  <div class="footer">Footer</div>
</div>

Answer 3

give 100% of the parents width to its children.

.parent {
  display: 'flex';
  flex-direction: column;
  height: 100%;
}

.child {
  border: 1px solid black;
  height: 100%;
}