0

I have a layout looking like this:

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.column-12 {
  width: 50%;
}

.column-12 {
  width: 50%;
}
<div class="flex-row">
  <div class="column-12" id="column-1">
    Here are some form fields
  </div>
  <div class="column-12" id="column-2">
    Here should be the image
  </div>
</div>

The column-1 has children that define its height. I want it to be the maximum height a column can get in a .flex-row (so column-2 will never exceed column-1 height) – this is because I want the image fitted in the column-2 that will have height: 100% so it should match the column-1 height.

How can I do this? When I put an image into column-2 and set max-width: 100%; width: 100%; height: 100%; max-height: 100%; it matches the width, but the image is much taller than the column-1.

mdmb
  • 4,833
  • 7
  • 42
  • 90

0 Answers0