Вам необходимо изменить стили у класса menu
с таких:
.menu {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
background: #ccc;
}
на следующие:
.menu {
display: inline-flex;
align-items: center;
justify-content: flex-start;
background: #ccc;
}
Всё дело в том, что ваше описание устанавливает блочному (а flex
- это блочный элемент) элементу с классом main
ширину его родителя, а ширина родителя (body
в данном случае установлена у вас в значение 100%
). Отсюда и проблема.
На текущий момент большинством браузеров поддерживаются новые значения для width
: max-content, min-content и fit-content, призванные разрешать подобные ситуации.
Вы можете поэкспериментировать с ними, но имейте в виду, хоть эти значения и поддерживаются браузерами, они всё ещё не входят в спецификации, так что не рекомендуется использовать их в боевых проектах.
Поэтому на сегодняшний день лучше остановиться на варианте с inline-flex
.
Да, кстати, абсолютно незачем использовать overflow: scroll
для body
- полоса прокрутки итак будет появляться по мере необходимости.
Привожу итоговый пример целиком:
body,
html {
width: 100%;
height: 100%;
}
.menu {
display: inline-flex;
align-items: center;
justify-content: flex-start;
background: #ccc;
}
.menu.max-content {
display: flex;
width: max-content;
align-items: center;
justify-content: flex-start;
background: #ccc;
}
.menu.fit-content {
display: flex;
width: fit-content;
align-items: center;
justify-content: flex-start;
background: #ccc;
}
.item {
font-size: 46px;
margin-right: 15px;
}
<div class="menu">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<p><center><em>display: inline-flex</em></center></p>
<hr>
<div class="menu max-content">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<p><center><em>width: max-content</em></center></p>
<hr>
<div class="menu fit-content">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<p><center><em>width: fit-content</em></center></p>