Как сделать изогнутые элементы одинакового размера, если они могут содержать изображения разных размеров?

Question

Настройка flex: 1 1 0 для элементов Flex не работает, как и следовало ожидать, когда элементы Flex могут содержать изображения разных размеров.

В приведенном ниже примере, flex-элемент, содержащий изображение, становится намного шире, чем остальные.

HTML

<div class="flex-container">
  <div class="flex-item">
    <p>Hi</p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/1/11/Episkopi_01-2017_img11_Kourion.jpg">
  </div>
  <div class="flex-item">
    <p>there</p>
  </div>
  <div class="flex-item">
    <p>dear</p>
  </div>
  <div class="flex-item">
    <p>reader</p>
  </div>
</div>

CSS

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

.flex-item {
  flex: 1 1 0;
}

.flex-item:nth-child(odd) {
  background-color: blue;
}

.flex-item:nth-child(even) {
  background-color: yellow;
}

https://jsfiddle.net/gzLwn7cu/

Я мог бы попытаться использовать ширину вместо гибких свойств. Тогда flex-элементы получают правильную ширину, но изображение переполняется.

.flex-item {
  width: 25%;
}

https://jsfiddle.net/gzLwn7cu/1/

Только когда я добавлю свойства на само изображение, я смогу решить проблему.

img {
  width: 100%;
  height: auto;
}

https://jsfiddle.net/gzLwn7cu/1/

Однако я хочу, чтобы дочерние элементы содержались в flex-элементах одинакового размера (вдоль основной оси), не зная, что там может быть.

Можно ли установить какое-то свойство flex, которое достигает этого?

Answer 1

Flex-баз будет вашим ответом. flex-basis: 50%;. Flex базис добавляет отправную точку, откуда рассчитать flex: 1 1 0 Смотри здесь https://jsfiddle.net/8ex91kn0/

Ширина изображения, которое вы должны иметь, потому что по умолчанию изображение будет иметь полную ширину. для того, чтобы он соответствовал размеру ячейки, нам нужно width: 100%;