Высота изображения внутри flex по размеру контейнера

Question

Есть блок-обертка wrap, который может быть разной высоты.

Внутри него есть три блока - top, middle и bottom.

Высота блоков middle и bottom может быть разная, а блок top занимает оставшееся пространство.

Внутри top лежит content, внутри которого есть content_middle у каждого из них задана высота 100%.

Внутри последнего лежит само изображение, у которого так же задана высота 100%.

Но так не работает - изображение всё-равно остается в исходном размере и middle и bottom вылезают за пределы wrap.

Как можно сделать, чтобы все эти блоки не вылезали за пределы wrap?

Здесь не работает:

.wrap {
  width: 500px;
  height: 500px;
  display: flex;
  flex-direction: column;
  background-color: #000;
  padding: 10px 20px;
}

.top {
  flex: 1px;
  background-color: #f4f4f4;
  padding: 10px 10px 0;
}

.content {
  position: relative;
  height: 100%;
}

.content_middle {
  position: relative;
  z-index: 2;
  height: 100%;
  margin-left: 20px;
  margin-right: 20px;
}

.content_middle img {
  height: 100%;
}

.middle {
  height: 50px;
  margin-top: 15px;
  background-color: red;
  flex: none;
}

.bottom {
  height: 50px;
  margin-top: 15px;
  background-color: blue;
  flex: none;
}

<div class="wrap">
  <div class="top">
    <div class="content">
      <div class="content_middle">
        <img src="https://via.placeholder.com/300x550.jpg/e9ff2d" alt="">
      </div>
    </div>
  </div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

Здесь работает:

.wrap {
  width: 500px;
  height: 500px;
  display: flex;
  flex-direction: column;
  background-color: #000;
  padding: 10px 20px;
}

.top {
  flex: 1px;
  background-color: #f4f4f4;
  padding: 10px 10px 0;
}

.content {
  position: relative;
  height: 100%;
}

.content_middle {
  position: relative;
  z-index: 2;
  height: 100%;
  margin-left: 20px;
  margin-right: 20px;
}

.content_middle img {
  height: 100%;
}

.middle {
  height: 50px;
  margin-top: 15px;
  background-color: red;
  flex: none;
}

.bottom {
  height: 50px;
  margin-top: 15px;
  background-color: blue;
  flex: none;
}

<div class="wrap">
  <div class="top">
    <div class="content">
      <div class="content_middle">
      </div>
    </div>
  </div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

Второй пример без изображения и там все отлично получается. Нужно так же, только с картинкой.

Из структуры удалил несколько блоков, которые не влияют на ситуацию, поэтому такая вложенность.

Answer 1

Все работает корректно если добавить "болванку" в пример номер два:

img {
  width: auto;
  max-height: 100%;
  padding: 0;
  margin: 0;
}

.wrap {
  width: 500px;
  height: 500px;
  display: flex;
  flex-direction: column;
  background-color: #000;
  padding: 10px 20px;
}

.top {
  flex: 1px;
  background-color: #f4f4f4;
  padding: 10px 10px 0;
}

.content {
  position: relative;
  height: 100%;
}

.content_middle {
  position: relative;
  z-index: 2;
  height: 100%;
  margin-left: 20px;
  margin-right: 20px;
}

.middle {
  height: 50px;
  margin-top: 15px;
  background-color: red;
  flex: none;
}

.bottom {
  height: 50px;
  margin-top: 15px;
  background-color: blue;
  flex: none;
}

<div class="wrap">
  <div class="top">
    <div class="content">
      <div class="content_middle">
        <img src="https://i.picsum.photos/id/916/200/300.jpg?hmac=AlGE1xEsSBVvJKbHoDnjf9v5TRINh8LNMN6xwzQieO0" />
      </div>
    </div>
  </div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

Альтернативный подход с использованием background-image:

img {
  max-width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

.wrap {
  display: grid;
  grid-template-rows: 1fr max-content max-content;
  width: 500px;
  height: 500px;
  background-color: #000;
  padding: 10px 20px;
}

.top {
  background-image: url("https://picsum.photos/400/600");
  background-size: cover;
  background-position: center;
}

.middle {
  height: 50px;
  margin-top: 15px;
  background-color: red;
}

.bottom {
  height: 50px;
  background-color: blue;
  margin-top: 15px;
}

<div class="wrap">
  <div class="top">
    <div class="content">
      <div class="content_middle"></div>
    </div>
  </div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

БЛОГ НА HUSL

Высота изображения внутри flex по размеру контейнера

Ответы (1 шт):