How to have an image inside table/flex with 100% height?

Question

I'm struggling with getting my header area to behave the way I want when shrinking and enlarging the website. The header should be fully responsive.

What I want

The header consists of three parts:

|-------------------|----------------------------------------------|--------------|
||-----------------||                                              ||------------||
||  The site logo  ||    A text message                            ||Another logo||
||-----------------||                                              ||------------||
|-------------------|----------------------------------------------|--------------|

I want the rules to be like this:

The logo is 40% of the document width but can't be wider than 400 px. This is done with width and max-width. Height is dynamic/auto.
The text message column is gonna be as wide as it can be, but don't have any fixed width.
The other logo to the right is gonna be 100% height of the column, which is based of the height of the site logo to the left.

The problem

The problem is that it seems impossible to get that logo to the right to be 100% in height without being as big as the entire document. I want it to have the height of the column as if the logo wasn't in there.

What I've tried

I've tried both the table solution ("div with display:table") and the flex grid solution (div with display:flex). The latest mentioned is the one I'm currently struggling with.

body {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #fff;
  background: #20262e;
}

.container {
  display: flex; 
  flex-direction: row;
}

.col {
  vertical-align: middle;
  background: hsla(0,0%,100%,.1);
  margin:2px;
  padding:10px;
}

.col.logo {
  width: 40%;
  max-width: 400px;
}

.col.logo img {
  width: 100%;
  height: auto;
}

.col.game-host-logo img {
  width:auto;
  max-width: 100%;
  height: 100%;
}

<div class="container">

  <div class="col logo">
    <img src="https://dromfemman.se/assets/img/dromfemman_logo.png" />
  </div>

  <div class="col live-msg">
    Text Message
  </div>

  <div class="col game-host-logo">
    <img src="https://dromfemman.se/assets/img/ssl_logo.svg" />
  </div>

</div>

You need to specify height at least once. Give `height:150px;` to the `container` and add a property to the following class of image `.col.game-host-logo img { height: -webkit-fill-available; }` or there may be another way around. hope this will do. — Mohammed Wahed Khan, Nov 14 '18 at 06:22
@Mohammed Wahed Khan But then it looses its responsiveness. When I shrink the browser window the header will not adjusts to that. But if it's not possible to do what I want then fine. Just a bit surprising. I thought there would be a solution these days to this. — Peter Westerlund, Nov 14 '18 at 06:28
As I said earlier there might an other way. can you tell me what is the issue you are getting in responsive? we can find a way. — Mohammed Wahed Khan, Nov 14 '18 at 06:40
@MohammedWahedKhan Well if you run the code example I have above you see that the issue is that the logo to the right is getting way too big. It should only be as high as the logo to the left is. The right logo should fill the high as the column has when the logo isn't there. — Peter Westerlund, Nov 14 '18 at 06:43
Questions by you. 1) You want the right logo to have the height same as the left one A) Yes, you can achive it if you have tried what I have commented first. 2) You want the height of the right logo section to remain constant if the logo(img) is missing. A) yes you can achive it too. [Codepen](https://codepen.io/Wahed98666/pen/pQeyXE?editors=1100) --------------- My question to you is what is the problem you are facing in responsive. — Mohammed Wahed Khan, Nov 14 '18 at 06:56
@MohammedWahedKhan To be more clear: I don't want any hight to be fixed. Of course I would do that if I would accept that. I thought that was implied. The whole question is how to get this to work as I want without that. — Peter Westerlund, Nov 14 '18 at 07:02

score 0 · Answer 1 · answered Nov 14 '18 at 12:20

There are two main problems here:

There is no fixed height on the flex container or image item.
There is no fixed width on the flex item containing the image.

Problem #1: There is no fixed height on the flex container or image item.

Because there is no fixed height on the flex container, or the item containing the image (.col.game-host-logo), both are sized based on the size of the content (height: auto default, per the spec).

In this case, the content is an image with natural dimensions of 482 x 565 px.

Problem #2: There is no fixed width on the flex item containing the image.

Because there is no fixed width on the item containing the image, the image is again free to expand to its natural dimensions.

By setting a width to the item, your problem appears to be resolved without violating any of your requirements.

jsFiddle demo

.container {
  display: flex;
}

.col.logo {
  width: 40%;
  max-width: 400px;
}

.col.logo img {
  max-width: 100%;
  height: auto;
}

.col.live-msg {
  flex: 1;                  /* consumes all free space */
}

.col.game-host-logo {
  width: 20%;               /* new */
}

.col.game-host-logo img {
  max-width: 100%;
}

.col {
  background: hsla(0, 0%, 100%, .1);
  margin: 2px;
  padding: 10px;
}

body {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #fff;
  background: #20262e;
}

<div class="container">

  <div class="col logo">
    <img src="https://dromfemman.se/assets/img/dromfemman_logo.png" />
  </div>

  <div class="col live-msg">
    Text Message
  </div>

  <div class="col game-host-logo">
    <img src="https://dromfemman.se/assets/img/ssl_logo.svg" />
  </div>

</div>