Два плавающих div в div

Question

У меня есть div и два div в одной строке в этом master div.Но я хочу, чтобы при изменении окна браузера второй div перемещался под первый div.Я не хочу горизонтальную прокрутку.

div.footban {
  width: 100%;
  text-align: center;
  display: flex;
}

div.footban div {
  border: solid 1pt black;
  display: table;
  min-width: 300px;
  margin: 0 auto;
}

<div class="footban">
  <div>Hello Hello Hello Hello Hello Hello</div>
  <div>Hello Hello Hello Hello Hello Hello</div>
</div>

Answer 1

Вы также можете использовать @media запросы

Просто добавьте display: block

@media all and (max-width:768px){
    div.footban{display: block;}
}

Answer 2

div.footban {
    display: flex;
}

когда вы устанавливаете свойство отображения элемента на flex, как вы это сделали, flex-direction по умолчанию устанавливается на row, что помещает каждый прямой дочерний элемент в одну строку

когда вы изменяете размер своего окна, вы можете просто установить медиа-запрос, который будет действовать на определенный размер окна вашего браузера, и сбросить flex-direction на column, и каждый прямой потомок div.footban будет выровнен по вертикали ивторой div будет под первым

// I use 768px just for sample purpose

@media all and (min-width : 768px) {
    div.footban {
        flex-direction: column;
    }
}        

Answer 3

Все, что вам нужно сделать, это добавить flex-wrap: wrap; к div.footban:)

div.footban {
  width: 100%;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}
div.footban div {
  border: solid 1pt black;
  display: table;
  min-width: 300px;
  margin: 0 auto;
}

<div class="footban">
  <div>Hello Hello Hello Hello Hello Hello</div>
  <div>Hello Hello Hello Hello Hello Hello</div>
</div>