How to size a flex container to its content by removing extra space?

Question

css

Here is the structure of the header:

<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">[email protected]</div>
          <div class="user__icon">
            <img src="img/account.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </header>

Here are the styles:

* {
  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%;
}

Here's the crux of the problem:





Why does shrinking a flex item leave an empty space in the container equal to its previous size? How to remove it? Is there a problem with the structure itself? Or do you need to add something?

Answer 1

Try setting the .header__user class justify-content: end;