Flex item with image child doesn't adjust from its original width

Question

I'm trying to create a simple header and I'm having problems with the logo image because it's taking more space than needed.

.wrapper {
  display: flex;
  flex-direction: row;
  height: 50px;
}
.logo {
  padding: 5px;
}
img {
  height: 100%;
}
.content {
  padding: 5px;
}

<div class="wrapper">
  <div class="logo"><img src="http://placehold.it/350x150"/></div>
  <div class="content">content</div>
</div>

As you can see, the "content" text isn't placed near the logo, because the logo wrapper has a width equal to the size of the image before it gets resized by CSS.

I noticed that if I set height: 100% to the .logo element the situation is a bit better, but doing so, the "content" text overlaps a bit the image.

How can I fix it?

Answer 1

Here are two ways to fix the problem:

Method #1 – Remove the extra wrapper. Make the image itself the flex item.

.wrapper {
  display: flex;
  flex-direction: row;
  height: 50px;
}
img {
  height: 100%;
}
.content {
  padding: 5px;
}

<div class="wrapper">
  <img src="http://placehold.it/350x150"/><!-- div wrapper removed -->
  <div class="content">content</div>
</div>

Method #2 – Define a height for the image wrapper. (No changes to the HTML.)

.wrapper {
  display: flex;
  flex-direction: row;
  height: 50px;
}

.logo {
  height: 100%; /* new */
  border: 1px dashed red;
}

img {
  height: 100%;
}

.content {
  padding: 5px;
  margin-left: 5px;
  border: 1px dashed red;
}

<div class="wrapper">
  <div class="logo"><img src="http://placehold.it/350x150" /></div>
  <div class="content">content</div>
</div>