Flex Item With Image Child Doesn't Adjust From Its Original Width

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. As you can see, the 'content' text isn't placed near t

Solution 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;
}

<divclass="wrapper"><imgsrc="http://placehold.it/350x150"/><!-- div wrapper removed --><divclass="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;
}

<divclass="wrapper"><divclass="logo"><imgsrc="http://placehold.it/350x150" /></div><divclass="content">content</div></div>

Solution 2:

You have to explicitly set image height in pixels. height: 100% will use the image original height, NOT its container height.

I added justify-content and align-items to the flex container so things get properly positioned.

.wrapper {
  display: flex;
  flex-direction: row;
  height: 50px;
  justify-content: flex-start;
  align-items: flex-start;
}
.logo {
  padding: 5px;
}
img {
  max-height: 50px
}
.content {
  padding: 5px;
}

<divclass="wrapper"><divclass="logo"><imgsrc="http://placehold.it/350x150"/></div><divclass="content">content</div></div>