Почему во flexbox не работает адаптивный дизайн с flex-direction?

Question

У меня есть портфолио, но я не очень хорошо разбираюсь с CSS.

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

Этоэто как я хочу, используя flex-direction: column ,:

Код родителя div:

display: flex;
justify-content:center;
align-items:center;
background-color:#C4C4C4;
min-height: 100vh;
flex-direction: column;

Но когда я добавляю отзывчивость, она остается такой: Элементы вне div родительского элемента.

Код такой же, меняется только цвет фона.

background-color: red;
width:800px;
height:650px;
margin: 30px;

Это не исправляет.

Если я не использую flex-direction: column, он останется таким:

Кто-то, почему?

Answer 1

max-width не устанавливает ширину дочерних элементов.

Answer 2

Убедитесь, что вы установили ширину для всех ваших контейнеров; похоже, вы хотите, чтобы серый контейнер заполнил область просмотра, а блоки были равномерно распределены.

Вот рабочий пример:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  background-color: gray;
  width: 100vw;
  height: 100vh;
}

.block {
  background-color: #C4C4C4;
  min-height: 33vh;
  width: 90vw;
}

<div class="container">
  <div class="block" style="background-color: red">
    A
  </div>
  <div class="block" style="background-color: blue">
    B
  </div>
</div>

Answer 3

Ваша основная проблема отсутствовала max-width: 100%; у дочерних элементов, поэтому width:800px не будет переполнять родительский контейнер, взгляните на фрагмент

section {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #C4C4C4;
  min-height: 100vh;
  padding: 15px 30px;
  box-sizing: border-box;
}

@media(max-width:800px) {
  section {
    flex-direction: column;
  }
}

div {
  max-width: 100%;
  width: 800px;
  height: 650px;
  margin: 15px
}

div:first-of-type {
  background-color: red;
}

div:last-of-type {
  background-color: blue
}

<section>
  <div>red</div>
  <div>blue</div>
</section>