Почему возникают проблемы с адаптивностью, когда я добавляю свойство "flex-direction: column"?

При добавлении свойства "flex-direction: column" к классу "container", вы изменяете ориентацию гибкого контейнера на вертикальную (по умолчанию она была горизонтальной). Это может привести к проблемам с адаптивностью элементов внутри контейнера.

Для исправления адаптивного поведения после добавления свойства "flex-direction: column" можно использовать дополнительные свойства и медиа-запросы.

1. Определите, какие элементы внутри контейнера должны занимать всю доступную высоту и какие должны изменять свой размер в зависимости от содержимого. Для элементов, которые должны растягиваться на всю высоту, добавьте свойство "flex: 1" или "align-self: stretch".

Например:
.container {
  display: flex;
  flex-direction: column;
}

.fixed-height-item {
  flex: 1; /* или align-self: stretch; */
}

2. Используйте медиа-запросы для изменения адаптивного поведения элементов в зависимости от ширины экрана или других факторов. Например, вы можете изменять свойство "flex-direction", чтобы вернуться к горизонтальной ориентации для более узких экранов.

Например:
@media (max-width: 768px) {
  .container {
    flex-direction: row;
  }
}

Остальные свойства, такие как "flex-grow", "flex-shrink" и "flex-basis", также могут помочь в контроле адаптивного поведения элементов внутри гибкого контейнера.

Итак, используя комбинацию свойств и медиа-запросов, вы можете контролировать адаптивное поведение элементов после добавления свойства "flex-direction: column" к классу контейнера.

Потому что: 
 1. flex-shrink по умолчанию 1 
 2. flex-shrink работает вдоль главной оси 
 
 => ось повернули, flex-shrink перестал работать в горизонтальном направлении => содержимое растянулось по заданным размерам. Т.к. 1140 никак не влезает ~730 (или на какой там ширине вы смотрите), всё развалилось.