So I have the following mark-up:

<div class="box">
  <div class="image" style="background-image: url('<url>')"></div>
  <div class="content">
    <p>This is some content</p>
    <p>This is some more content</p>
  </div>
</div>

css:

.box {
  display: flex;
  flex-direction: row;
}

.image {
  width: 50%;
  height: 100%;
  min-height: 100%
}

.content {
  width: 50%;
}

The issue is that the .image div never expands to full height. The only way I can get it to expand to the full height is if I set the height on the parent .box container.

I don’t want to do this because the content is dynamic. I’ve tried setting a min-height and height and neither seem to work. I’ve also tried using justify-content: stretch; on the container and flex-grow: 1 on the image but nothing is working.

Where am I going wrong?