Flexbox почему появляется горизонтальная прокрутка?

Question

[Иван Ефимов]

Почему блоки 1,2,3,4 не растягиваются вниз по высоте так чтобы
не было горизонтальной прокрутки на ширине экрана от 630px до 830px,ведь у блоков нет фиксированный ширины,что им может мешать растигиваться?
пример на https://codepen.io/Achilles21/pen/RxQGve

Answer 1

[Odisseya]

Пропишите flex-wrap: wrap;

@media screen and (min-width: 700px) {
    .columns,
    .column {
      display: flex;
      flex-wrap: wrap;
    }
  }

Answer 2

[Dima Polos]

Картинки должны иметь max-width: 100%, и height: auto. Иначе картинка железно забирает свои размеры по дефолту, а флекс элементы растягиваются из-за контента! Второй момент, Вы написали flex: 1; это grow или shrink? Свойство может не сработает, так как и тот и другой варианты записываются фракциями, целыми числами, надо написать либо полное свойство флекс, включая basis, grow, shrink, либо отдельно flex-grow: 1.