Image dissapears when I use flexbox

user_6858929 0
Viewed 55

I am trying to build this nav bar and make it responsive as well, the thing is that when I apply display: flex; the logo just dissapears. For some reason, when I use a fixed width the image stays, but when I use percentages the image just goes away. I would like to use percentages to mantain the responsiveness of the nav bar.

Here is what I have so far.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: flex;
  border: 10px solid orange;
  justify-content: space-around;
  width: 100%;
}

header div#company-logo img#header-img {
  width: 50%;
}
<header id="header">
  <div id="company-logo">
    <img src="https://via.placeholder.com/100x50.jpg" alt="hamburguer logo" id="header-img">
  </div>
  <nav id="nav-bar">
    <ul>
      <li class="nav-link"><a href="http://">Home</a></li>
      <li class="nav-link"><a href="http://">Info</a></li>
      <li class="nav-link"><a href="http://">Contact Us</a></li>
    </ul>
  </nav>
</header>

Like I said before, I have tried with fixed percentages, such as px or vw. I just want to understand why the image dissapears when I use percentages.

responsive-design flexbox svg css
1 Answers
#company-logo {
  flex: 0 0 auto;
}

...should do it. It means:

flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;

The important bits are flex-shrink: 0; flex-basis: auto;.

user_18916770
Related