@wellew

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

Пытаюсь сверстать обычное горизонтальное меню на флексах (для тренировки).
<div class="header">
			<div class="header_section">
				<div class="header_item header_logo">
					WDB
				</div>
				<div class="header_item header_button">
					<a href="#">Пункт</a>
				</div>
				<div class="header_item header_button">
					<a href="#">Пункт</a>
				</div>
				<div class="header_item header_button">
					<a href="#">Пункт</a>
				</div>
				<div class="header_item header_button">
					<a href="#">Пункт</a>
				</div>
				<div class="header_item header_button">
					<a href="#">Пункт</a>
				</div>
					<div class="header_item header_button">
					<a href="#">Пункт</a>
				</div>
				<div class="header_item header_button">
					<a href="#">Пункт</a>
				</div>
				<div class="header_item header_button">
					<a href="#">Пункт</a>
				</div>
				<div class="header_item header_button">
					<a href="#">Пункт</a>
				</div>
			</div>	
			<div class="header_section">
				<div class="header_item header_button">
					<a href="#">Настройки</a>
				</div>
				<div class="header_item header_button">
					<a href="#">Войти</a>
				</div>
			</div>
		</div>
	</body>

a{
	color:#fff;
	text-decoration: none;
}
.header{
	display: flex;
	justify-content: space-between;
	padding: 10px;
	background-color: #689CD2;
	color:#fff;
}
.header_section{
	display: flex;
	align-items: center;
}
.header_item{
	padding: 10px 15px;
	font-size: 20px;
	margin-left: 5px;
}


Всё просто - флекс контейнер для хэдера чтобы раскидать меню и кнопки - Настройки Войти и по флекс контейнеру для самого меню и кнопок.
Фон задал самому хэдеру.
Но при приближении блоки начинают вываливаться из родителя, задний фон у них пропадает и текст сливается с body
5bf2c8aea28bf913048447.png5bf2c8c6db740468757562.png
  • Вопрос задан
  • 743 просмотра
Решения вопроса 1
shmatuan
@shmatuan
8 year of Web, 5 years of Vue
.header{
  min-width: fit-content;
  max-width: 100%;
}

или
overflow: auto, что бы добавить прокрутку
flex-wrap: wrap; - что бы пустить вторым рядом
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы