How to Make Flexbox Children 100% Height of Their Parent

How can I make Flexbox children 100% height of their parent?

Use align-items: stretch

Similar to David Storey's answer, my workaround is:

.flex-2 {
    display: flex;
    align-items: stretch;
}

Note that height: 100% should be removed from the child component (see comments).

Alternatively to align-items, you can use align-self just on the .flex-2-child item you want stretched.

Make child divs 100% height of parent using flexbox

Here you go.

<div class="columns">
  <div class="col">
    <div class="row">
      <img class="img-1" src="https://cdn.contrastly.com/wp-content/themes/contrastly-v9/images/anthropics-portraitpro.png">
    </div>
    <div class="col">
      <div class="row">
        <img class="img-2" src="https://assets.grooveapps.com/images/5fff4a731d2cfa006f386042/1624073591_Professional-Headshots-Portraits-by-Jared-Wolfe-Alexandria-VA-Portrait-Studio-Testimonial-01.png">
      </div>
    </div>
  </div>
</div>

CSS

.columns {
  display: inline-flex;
  width: 100%;
  height: auto;
  background: linear-gradient(rgb(253, 221, 57) 0px, rgb(253, 221, 57) 0px) center bottom / 100% 70% no-repeat;
}

.img-1 {
  width: 50%;
  float: right;
  display: flex;
  flex-wrap: wrap;
}

.img-2 {
  height: auto;
  width: 63%;
  display: flex;
  flex-wrap: wrap;
  float: right;
}

.col {
  display: inline-flex;
}

.row {
  max-width: 48%;
  display: block;
  margin: 0 auto;
}

I get the impression you are teaching yourself and that is wicked awesome! Please keep going!! Also, once you finish writing your layer of HTML, abstract the styles away into CSS classes. Then play around with your CSS until you find the right answer for each element.

I arrived at this solution thusly.

1. Named each column and row col-1, col-2, row-1, row-2, etc.
2. Gave both images a class.
3. Inspected element and stepped through each element one-by-one until I arrived at the answer for each.
4. Moved .col and .row back up the food chain.

For sure, always start in HTML. But once you get a rough sketch going, abstract out to CSS and have some fun.

Make children full height of parent flex box css

Do these 3 things for .child:

1. Remove height: 100%
2. Remove align-items: stretch
3. Use flex-grow: 1

And remove align-items: stretch; and flex-direction:row; from .parent too.

.parent {
  display: flex;
  /* flex-direction: row; */
  border: thin solid orange;
  margin: 5px;
  padding: 5px;
  /* align-items: stretch; */
}

.child {
  display: flex;
  /*  height: 100%; */
  
  flex-grow: 1; /* NEW */
  
  width: 25%;
  /*  align-self: stretch; */
}

.child.blue {
  background: blue;
}

.child.red {
  background: red;
}

.child.yellow {
  background: yellow;
}

.child.green {
  background: green;
}

<div class="parent">
  <div class="child green">
    <p>
      this is some content
    </p>
  </div>
  <div class="child blue">
    <p>
      this is some content
    </p>
    <p>
      this is some content
    </p>
  </div>
  <div class="child red">
    <p>
      this is some content
    </p>
    <p>
      this is some content
    </p>
    <p>
      this is some content
    </p>
  </div>
  <div class="child yellow">
    <p>
      this is some content
    </p>
  </div>
</div>

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>
  </div>
  <div style='background-color: blue'>
    some<br> cool<br> text
  </div>
</div>

.parent {  display: -webkit-flex;  /* Safari */  display: flex;  box-sizing: border-box;  background-color: orange;}
.left-line {  width: 10px;  background-color: red;}
.content {  flex: 1;  padding: 0 0 0 14px;  letter-spacing: 1px;  line-height: 18px;}

<div class="parent">  <div class="left-line">s</div>  <div class="content">    <p>Lorem Ipsum is simply dummy text</p>    <p>Lorem Ipsum is simply dummy text of the printing...</p>    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>  </div></div>

html, body {
  height: 100%;
  margin: 0;
}

header {
  background: blue;
  height:20%
}

div.holder {
  height:80%; /* <------ make it of desired height */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

div.holder > div {
  min-height: 100%; /* <------ better to provide min-height */
}

div.one {
  flex: 1;
  background: green;
}

div.two {
  flex: 1;
  background: yellow;
}

div.three {
  flex: 1;
  background: red;
}

div.four {
  flex: 1;
  background: orange;
}

<body>
  <header></header>
  <div class="holder">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
    <div class="four">four</div>
  </div>
</body>

body {
  overflow: hidden;
  margin:0;
}

p {
  padding: 30px 0;
  background: lightGray;
}

.app {
  display: grid;  /* grid container */
  height: 100vh; /* height on the upper container */
}

.app * {
  display: inherit; /* cascading grid */
  min-height: 0; /* related question : https://stackoverflow.com/a/43312314/8620333 */
}

.container-5 {
  overflow: auto; /* scroll here */
}

<div class="app">
  <div class="container-1">
    <div class="container-2">
      <div class="container-3">
        <div class="container-4">
          <div class="container-5">
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>