Сделать строку flexbox высотой самого короткого дочернего элемента?

Question

У меня возникли некоторые трудности при использовании Flexbox. Цель состоит в том, чтобы иметь строку, которая имеет ту же высоту, что и самый короткий дочерний элемент. В качестве примера возьмем два изображения: одно имеет высоту 200 пикселей, а другое - высоту 120 пикселей. Этот пример ниже работает так, как задумано, когда элементы <img> являются прямыми дочерними элементами элемента flex.

.row {
  display: flex;
  width: 100%;
  background: orange;
}

<div class="row">
   <img src="https://s3.amazonaws.com/imagetest.com/purple_200.jpg" />
   <img src="https://s3.amazonaws.com/imagetest.com/teal_120.jpg" />
</div>

Однако в следующем примере высота элемента flexbox увеличивается до самого высокого дочернего элемента:

.row {
  display: flex;
  width: 100%;
  background: orange;
}

<div class="row">
  <div class="col">
    <img src="https://s3.amazonaws.com/imagetest.com/purple_200.jpg" />
  </div>
  <div class="col">
    <img src="https://s3.amazonaws.com/imagetest.com/teal_120.jpg" />
  </div>
</div>

Что такое решение для <div class="row"> высоты самого короткого дочернего элемента?

Answer 1

Как указал @Michael_B, первый пример выглядит правильным только из-за align-items: stretch.

Вы не можете сделать это с помощью flex или чистого CSS.Если бы у нас был селектор CSS, который мог бы выбрать самого короткого брата, то мы могли бы сделать это, но мы этого не делаем!

Вы можете использовать фиксированную высоту для родителя:

.row {
  display: flex;
  width: 100%;
  height: 120px; /* fixed height */
  background-color: orange;
}

<div class="row">
   <img src="https://s3.amazonaws.com/imagetest.com/purple_200.jpg" />
   <img src="https://s3.amazonaws.com/imagetest.com/teal_120.jpg" />
</div>

Или используйте JavaScript, чтобы сделать логику для вас:

$( document ).ready(function() {
    var min_height = -1;  
    
    $("img").each(function(  ) {
        if ($(this).height() < min_height || min_height == -1) {
            min_height = $(this).height();
        }
        $('.row').height(min_height);
    })
    
    $("img").each(function(  ) {
        $(this).height(min_height);
    });
});

.row {
  display: flex;
  width: 100%;
  background-color: orange;
  align-items: flex-start
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
   <img src="https://s3.amazonaws.com/imagetest.com/purple_200.jpg" />
   <img src="https://s3.amazonaws.com/imagetest.com/teal_120.jpg" />
</div>

Answer 2

Цель состоит в том, чтобы строка имела ту же высоту, что и самый короткий дочерний элемент.

Это не то, что flexbox может делать автоматически.

Вам нужно будет найти способ сообщить контейнеру, какая высота у самого маленького потомка, чтобы он мог отрегулировать его высоту, чтобы соответствовать. JavaScript, кажется, путь.

---

В качестве примера возьмем два изображения: одно имеет высоту 200 пикселей, а другое - высоту 120 пикселей. Этот пример ниже работает так, как задумано, когда элементы <img> являются прямыми дочерними элементами элемента flex.

«Пример, приведенный ниже, работает как задумано ...» Полагаю, вы подразумеваете, что высота строки равна высоте более короткого изображения (120 пикселей).

На самом деле строка имеет высоту 200px:

Более короткое изображение на самом деле растягивается от 120 до 200 пикселей, поскольку по умолчанию для гибкого контейнера установлено значение align-items: stretch, означающее, что гибкие элементы будут расширять всю длину поперечной оси. (Это то, как flexbox может доставить макет со столбцами одинаковой высоты.)

Если вы переопределите значение по умолчанию, скажем, align-items: flex-start, вы ясно увидите, что более высокие элементы задают высоту контейнера.

.row {
  display: flex;
  align-items: flex-start;  /* new */
  background: orange;
}

<div class="row">
  <img src="https://s3.amazonaws.com/imagetest.com/purple_200.jpg" />
  <img src="https://s3.amazonaws.com/imagetest.com/teal_120.jpg" />
</div>