Как сделать размер flex-контейнера по содержимому, убрав лишнее пространство?

Question

[absque]

Вот структура шапки:

<header class="header">
		<div class="container">
			<div class="header__body">
				<div class="header__logo-name">
					<a href="#" class="header__logo">
						<img src="img/mail.png" alt="">
					</a>
					<div class="header__name">My mail</div>
				</div>
				<div class="header__user">
					<div class="user__mail">[e-mail]</div>
					<div class="user__icon">
						<img src="img/account.png" alt="">
					</div>
				</div>
			</div>
		</div>
	</header>

Вот стили:

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body, html {
	height: 100%;
	font-family: 'Roboto', sans-serif;
}

.container {
	width: 90%;
	margin: 0 auto;
}
.header__body {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header__logo-name,
.header__user {
	display: flex;
	align-items: center;
}
.header__logo,
.user__icon {
	flex: 0 0 40px;
}
.header__logo img,
.user__icon img {
	max-width: 100%;
}

Вот суть проблемы:





Почему при уменьшении флекс элемента в контейнере остается пустое место, равное его прошлому размеру? Как это убрать? Проблема в самой структуре? Или нужно что-то дописать?

Answer 1

[Pavel Shvedov]

Попробуй классу .header__user задать justify-content: end;

Comments

[absque]

не подействовало