Flexbox child items use full space - html

Question

I'm building a site with flexbox, I have a problem that I can't fix.
.min-h-screen {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.parent {
flex:1;
background: red;
}
.child-one {
background: green;
display:flex;
}
.child-two {
background: yellow;
}
<div class="min-h-screen">
<div class="parent">
<div class="child-one">
<p>
child 1
</p>
</div>
<div class="child-two">
<p>
child 2
</p>
</div>
</div>
</div>
I want the child 1 and child 2 use the full space, right now they don't. How could I fix this. Already tried a lot. Height 100 % does not work.

Answer 1

Use nested flex containers.
.min-h-screen {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.parent {
flex: 1;
background: red;
display: flex; /* new */
flex-direction: column; /* new */
}
.child-one {
flex: 1; /* new */
background: green;
display: flex;
}
.child-two {
flex: 1; /* new */
background: yellow;
}
body { margin: 0; }
<div class="min-h-screen">
<div class="parent">
<div class="child-one">
<p>
child 1
</p>
</div>
<div class="child-two">
<p>
child 2
</p>
</div>
</div>
</div>

Answer 2

You just gotta flex the parent of the those two elements too.
* {
margin: 0;
}
.min-h-screen {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.parent {
flex: 1;
display: flex;
background: red;
}
.child-one {
background: green;
flex: 1;
}
.child-two {
background: yellow;
flex: 1;
}
<div class="min-h-screen">
<div class="parent">
<div class="child-one">
<p>
child 1
</p>
</div>
<div class="child-two">
<p>
child 2
</p>
</div>
</div>
</div>

Answer 3

.parent {
min-height: 100vh;
display:flex;
background: red;
flex-direction: column;
}
.child-one {
background: green;
flex: 1 0 50%;
}
.child-two {
background: yellow;
flex: 1 0 50%;
}
<div class="parent">
<div class="child-one">
<p>
child 1
</p>
</div>
<div class="child-two">
<p>
child 2
</p>
</div>
</div>