Flexbox: flex-base: 100%; не делает разрыв строки

Question

Я хочу разрыв строки после первого выбора. Я пробовал flex-base: 100% и ширину: 100%. Это не помогло. Я также присвоил html и body элементу ширину 100%. Это тоже не помогло. Где моя ошибка?

Вот мой код:

html, body {
  width:100%;
}

.flex {
  display:flex;
  width:100%;
}

.flex > div {
  flex-basis:100%;
}

<div class="flex">
  
  <div>
    <span>Lorem Ipsum</span>
    <select name="" id="">
      <option value="loremIpsum">Lorem Ipsum</option>
    </select>
  </div>
  
  <div>
    <span>Lorem</span>
    <select name="" id="">
      <option value="lorem">Lorem</option>
    </select>
  </div>
  
  
</div>

Answer 1

Вам также необходимо добавить flex-wrap: wrap к элементу контейнера Flex, чтобы flex-элементы могли разбиваться на несколько строк, или в вашем случае вы также можете просто использовать flex-direction: column.

.flex {
  display:flex;
  flex-wrap: wrap;
}

.flex > div {
  flex-basis:100%;
}

<div class="flex">
  <div>
    <span>Lorem Ipsum</span>
    <select name="" id="">
      <option value="loremIpsum">Lorem Ipsum</option>
    </select>
  </div>
  
  <div>
    <span>Lorem</span>
    <select name="" id="">
      <option value="lorem">Lorem</option>
    </select>
  </div>
</div>