Почему нельзя прокрутить этот flexbox?

Question

Я пытаюсь понять, почему следующий код не создает прокручиваемый flexbox.

var firstData = ["One", "Two", "Three", "Four"]
FillDiv();
FillDiv();

$("button").on('click', function() {
	FillDiv();
});

function FillDiv() {
	var newData = GetData();
  
  for (i = 0; i < newData.length; i++) {
    $(".wrapper").append('<div>Test</div>');
  }
}

function GetData() {
  return firstData;
}

.wrapper {
  display: flex;
  overflow-x: auto;
}

.wrapper div {
    display: block;
    width: 200px;
    height: 200px;
    background-color: black;
    color: white;
    text-align: center;
    margin-left: 1%;
  }

button {
  margin-top: 20px;
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
</div>

<button>
NEXT
</button>

Однако, следующий пример:

.container {
  display: flex;
  overflow-x: auto;
}

<div class="container">
<img src="https://as1.ftcdn.net/jpg/02/12/43/28/500_F_212432820_Zf6CaVMwOXFIylDOEDqNqzURaYa7CHHc.jpg" alt="">
<img src="https://as1.ftcdn.net/jpg/02/12/43/28/500_F_212432820_Zf6CaVMwOXFIylDOEDqNqzURaYa7CHHc.jpg" alt="">
<img src="https://as1.ftcdn.net/jpg/02/12/43/28/500_F_212432820_Zf6CaVMwOXFIylDOEDqNqzURaYa7CHHc.jpg" alt="">
<img src="https://as1.ftcdn.net/jpg/02/12/43/28/500_F_212432820_Zf6CaVMwOXFIylDOEDqNqzURaYa7CHHc.jpg" alt="">
<img src="https://as1.ftcdn.net/jpg/02/12/43/28/500_F_212432820_Zf6CaVMwOXFIylDOEDqNqzURaYa7CHHc.jpg" alt="">
<img src="https://as1.ftcdn.net/jpg/02/12/43/28/500_F_212432820_Zf6CaVMwOXFIylDOEDqNqzURaYa7CHHc.jpg" alt="">

</div>

Почему прокрутка ломается, когда я добавляю ширину и высоту в первом примере?

Answer 1

Добавьте flex-shrink: 0 к своим тестовым элементам. По умолчанию для элементов Flex установлено значение flex-shrink: 1, что позволяет им уменьшаться во избежание переполнения контейнера.

Подробнее см. "Коэффициент flex-shrink" раздел в моем ответе здесь:

• В чем различия между flex-base и width?

---

Проблема, о которой говорилось выше, не не существует во втором примере (с изображениями), потому что другой параметр по умолчанию для flex-элементов - min-width: auto. Это означает, что flex-элементы по умолчанию не могут быть меньше их содержимого. Если вы переопределите это значение по умолчанию с помощью img { min-width: 0 }, вы получите то же поведение, что и в первом примере.

Для получения дополнительной информации об алгоритме гибкого минимального размера см .:

• Почему гибкие элементы не уменьшаются в размерах контента?