I am trying to make a flexbox grid of items, where each row will stretch to be the same height as the tallest item. 

However, no matter what I seem to try either the content of the largest item is pushed outside and overflows, or the other items do not stretch. 

I have tried a single box that will be `display:flex` and the flex item of the main container. And putting it inside a wrapper. So the wrapper is the flex item and the box inside the wrapper is `display:flex`

Below is a Codepen of what I am trying to do. It's a 50/50 ratio of bottom image to the top text area. 

```css
.flex-container {
  display: flex;
  max-width: 500px;
  flex-flow: row wrap;
  height: auto;
  align-items: stretch;
}

.flex-item {
  width: 100px;
  margin: 30px;
}

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

.upper {
  order: 1;
  flex: 0 0 50%;
  border: 1px solid red;
}

.lower {
  order: 2;
  flex: 0 0 50%;
  border: 1px solid blue;
  display: flex;
}

img {
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin-bottom: 0;
}

.flex-item2 {
  width: 100px;
  margin: 30px;
  display: flex;
  flex-direction: column;
}
```

```html
<h1>Attempt 1</h1>
<div class="flex-container">
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>
  <div class="flex-item">
    <div class="item">
      <div class="upper">
        <p>hello</p>
      </div>
      <div class="lower">
        <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
      </div>
    </div>
  </div>

</div>

<h1>Attempt 2</h1>
<div class="flex-container">
  <div class="flex-item2">
    <div class="upper">
      <p>hello</p>
    </div>
    <div class="lower">
      <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
    </div>
  </div>
  <div class="flex-item2">
    <div class="upper">
      <p>hello</p>
    </div>
    <div class="lower">
      <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
    </div>
  </div>
  <div class="flex-item2">
    <div class="upper">
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
    </div>
    <div class="lower">
      <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
    </div>
  </div>
  <div class="flex-item2">
    <div class="upper">
      <p>hello</p>
    </div>
    <div class="lower">
      <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
    </div>
  </div>
  <div class="flex-item2">
    <div class="upper">
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
    </div>
    <div class="lower">
      <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
    </div>
  </div>
  <div class="flex-item2">
    <div class="upper">
      <p>hello</p>
    </div>
    <div class="lower">
      <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
    </div>
  </div>
  <div class="flex-item2">
    <div class="upper">
      <p>hello</p>
    </div>
    <div class="lower">
      <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
    </div>
  </div>
  <div class="flex-item2">
    <div class="upper">
      <p>hello</p>
    </div>
    <div class="lower">
      <img src="https://scx1.b-cdn.net/csz/news/800/2019/giantpandame.jpg" />
    </div>
  </div>

</div>
```

Full Pen

<https://codepen.io/Richardadsmith/pen/GRRPQLy?editors=1100>