Flexbox автоматически определяет размер (ширину) контейнера в зависимости от содержимого (проблемы)

Question

У меня есть ссылка на jsFiddle , которая представит проблему. В основном проблема заключается в среднем контейнере (sector2 синий), который изгибается в ориентации столбца и имеет 5 гибких дочерних элементов. Внутри этих четырех элементов находятся изображения размером 150x150 пикселей. Я присвоил image-wrapper (класс каждого дочернего элемента) flex: 1, что означает, что синий контейнер должен быть разделен на 5 частей равной высоты. Теперь я установил min-height: 100% каждого изображения, что делает высоту изображения равной высоте одной части (дочернего элемента).

Проблема возникает, когда я хочу сохранить соотношение сторон изображения и установить object-fit: scale-down. Это свойство заставляет изображение сохранять соотношение сторон, но контейнеры (image-wrapper) и синий контейнер (sector2) по-прежнему содержат исходную ширину изображения 150 пикселей.

У меня вопрос: как я могу сохранить пропорции изображения, и в то же время контейнеры должны автоматически изменять размер в зависимости от содержимого?

Я дополнительно добавлю код HTML и CSS здесь:

.container {
      display: flex;
      flex-direction: row;
      width: 600px;
      height: 500px;
      background-color: red;
    }
    
    .sector1 {
      display: flex;
      flex-direction: row;
      flex: 1 0 0%;
      background-color: green;
    }
    
    
    .sector3 {
      display: flex;
      flex-direction: row;
      flex: 1 0 0%;
      background-color: green;
    }
    
    .sector2 {
      display: flex;
      flex-direction: column;
      flex: 0 0 auto;
      background-color: blue;
      margin: 0 6px;
    }
    
    .image-wrapper {
      display: flex;
      flex-direction: column;
      flex: 1 0 0%;
    min-height: 0;
        min-width: 0;
    }
    
    .image {
       object-fit: scale-down;
       min-height: 100%;
       width: auto;
    }

<div class="container">
    <div class="sector1"></div>
    
    <div class="sector2">
    
      <div class="image-wrapper">
        <img class="image" src="https://mk0powerpackele6qayu.kinstacdn.com/wp-content/uploads/2018/07/image-75-150x150.jpg" />
      </div>
    
      <div class="image-wrapper">
        <img class="image" src="https://mk0powerpackele6qayu.kinstacdn.com/wp-content/uploads/2018/07/image-75-150x150.jpg" />
      </div>
      
      <div class="image-wrapper"></div>
      
      <div class="image-wrapper">
        <img class="image" src="https://mk0powerpackele6qayu.kinstacdn.com/wp-content/uploads/2018/07/image-75-150x150.jpg" />
      </div>
      
      <div class="image-wrapper">
        <img class="image" src="https://mk0powerpackele6qayu.kinstacdn.com/wp-content/uploads/2018/07/image-75-150x150.jpg" />
      </div>
      
    
    </div>
    
    <div class="sector3"></div>
    </div>




    

Answer 1

Я изменил .image-wrapper на flex: 0 0 auto; и считаю, что он дает желаемый эффект.Проверьте, не разошелся ли я в этой скрипке .

Ранее у вас было .image-wrapper при flex: 1 0 0%;, что означает, что элемент начинался с ширины 0, а затем увеличивался до размера контейнера.,Этот метод определения размера не учитывает размер элементов внутри.Поэтому увеличение ширины контейнера создаст синее пространство вокруг изображений.

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