Вложенный flexbox не дает усадки

Question

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

Я пытаюсь использовать для этого вложенные flex-боксы..outer-flex-container работает, как и ожидалось, все сокращается / растет вдоль горизонтальной оси, сохраняя соотношение сторон.

С помощью .inner-flex-container я пытаюсь получить те же результаты, но вдоль вертикальной оси (flex-flow: column).Однако, когда вы уменьшаете размер контейнера, вы получаете изображения, которые не сжимаются (или искажают соотношение сторон).

Я прочитал множество постов об использовании min-height: 0 для переопределения значения по умолчанию min-height: auto, но это, похоже, не решает мою проблему.

Почему .inner-flex-container не сжимается до размера контейнера?Есть ли лучший подход, чем flexbox, чтобы сделать это?

.outer-flex-container {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid red;
  width: 900px;
  height: 500px;
}

.outer-flex-container:hover {
  width: 500px;
  height: 100px;
}

.outer-flex-child {
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
}

.inner-flex-container {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid grey;
  min-height: 0;
  min-width: 0;
  /* max-height: 100%;  <-- Distorts aspect ratio */
  /* max-width: 100%; <-- Distorts aspect ratio */
}

.inner-flex-child {
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  max-height: 100%;
  max-width: 100%;
  opacity: 0.5;
}

<div class="outer-flex-container">
  <div class="outer-flex-child">
    <div class="inner-flex-container">
      <img class="inner-flex-child" src='https://i.stack.imgur.com/QH01k.png' />
    </div>
  </div>

  <div class="outer-flex-child">
    <div class="inner-flex-container">
      <img class="inner-flex-child" src='https://i.stack.imgur.com/QH01k.png' />
    </div>
  </div>

</div>

Answer 1

Флексбоксы можно вкладывать немного больше:

• создайте свой outer-flex-child a flexbox и добавьте flex: 0 1 auto к его flex item (inner-flex-container).

• и поскольку ваш inner-flex-container является столбцом flexbox добавьте align-items: flex-start к переопределить значение по умолчанию stretch beahvior (align-items: stretch), которое нарушает соотношение сторон элемента flex-изображения.

См. Демо ниже:

.outer-flex-container {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid red;
  width: 900px;
  height: 500px;
}

.outer-flex-container:hover {
  width: 500px;
  height: 100px;
}

.outer-flex-child {
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex; /* added */
}

.inner-flex-container {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid grey;
  min-height: 0;
  min-width: 0;
  flex: 0 1 auto; /* added */
  align-items: flex-start; /* added */
}

.inner-flex-child {
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  max-height: 100%;
  max-width: 100%;
  opacity: 0.5;
}

<div class="outer-flex-container">
  <div class="outer-flex-child">
    <div class="inner-flex-container">
      <img class="inner-flex-child" src='https://i.stack.imgur.com/QH01k.png' />
    </div>
  </div>

  <div class="outer-flex-child">
    <div class="inner-flex-container">
      <img class="inner-flex-child" src='https://i.stack.imgur.com/QH01k.png' />
    </div>
  </div>

</div>