Блог

Если я установлю #main.overflow равно none, я получу то, что хочу.

И если я установлю #main.overflow — прокрутка, а это не то, что я хочу, последний элемент будет поврежден по ошибке.

Почему полосы прокрутки вызывают ошибки гибкой компоновки?

правильный результат

   * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  #main {
    overflow: none;
    width: 200px;
    background-color: #321;
    display: flex;
    flex-direction: row;
    padding: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .el {
    width: 50px;
    height: 50px;
    background-color: red;
    margin: 5px;
  }  

 <div id="main">
  <div class="el"></div>
  <div class="el"></div>
  <div class="el"></div>
</div>  

неверный результат

   * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  #main {
    overflow: scroll;
    width: 200px;
    background-color: #321;
    display: flex;
    flex-direction: row;
    padding: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .el {
    width: 50px;
    height: 50px;
    background-color: red;
    margin: 5px;
  }  

 <div id="main">
  <div class="el"></div>
  <div class="el"></div>
  <div class="el"></div>
</div>  

Простой ответ: полосы прокрутки занимают место внутри div. Если вы заставляете их отображать с помощью настройки overflow: scroll , вы занимаете часть пространства внутри flexbox, а flex: wrap свойство вызывает перенос содержимого.

Ваш main flexbox может обрабатывать содержимое шириной 180 пикселей *.

Ширина содержимого также составляет ровно 180 пикселей**

Это не оставляет места для полос прокрутки, и содержимое переносится на следующую строку.

Существует устаревшее свойство: overflow: overlay из-за которого полосы прокрутки не занимают места, но оно имеет очень ограниченную поддержку и устарело, поэтому я бы не рекомендовал его использовать.

* Потому что ширина установлена на 200 пикселей, что включает в себя отступы по 10 пикселей с каждой стороны. box-sizing: border-box Свойство делает так, чтобы отступы включались в расчет высоты и ширины

** Каждый el имеет ширину 60 пикселей, включая поля с обеих сторон.