Make Flex Item Siblings The Same Height

I have this simple example: I need image to get same height as sibling div on right side not vv, i.e. shrink image to actual text height and keep aspect ratio.

Solution 1:

How is one sibling supposed to know the height of another sibling? That's outside the scope of CSS. You'll need a script for that.

But both siblings can share equal height if they refer to the height of their parent.

This may not be what you want, but here's one potential solution:

.container {
  display: flex;
  background-color: #ddd;
  height: 50px;
}

.logo {
  height: 100%
}

img {
  object-fit: contain;
  height: 100%;
}

.text {
  font-size: 300%;
}

<divclass="container"><divclass="logo"><imgsrc="https://upload.wikimedia.org/wikipedia/commons/0/07/Stora_Enso_web_logo.png"alt="test logo"></div><divclass="text">TEXT</div></div>

Also see: One flex item sets the height limit for siblings

Solution 2:

Use the same font-size value for the image height, but can't be % units.

.container {
  display: flex;
}

.logoimg {
  height: 3em;
  width: auto;
}

.text {
  font-size: 3em;
}

<divclass="container"><divclass="logo"><imgsrc="https://upload.wikimedia.org/wikipedia/commons/0/07/Stora_Enso_web_logo.png"alt="test logo"></div><divclass="text">TEXT</div></div>

Solution 3:

When you specify display:flex in the parent container generally the child elements can be sized by specifying a fixed height of the parent container and setting the child elements accordingly with a flex-direction default being row as @Michael_B suggested.

Solution 4:

.container {
    display: flex;
    background-color: #ddd;
    height: 50px;
}
.logo {
    object-fit: cover;
}

.text {
  font-size: 300%;
}
img {
    height: 100%;
    display: block;
}

<divclass="container"><divclass="logo"><imgsrc="https://upload.wikimedia.org/wikipedia/commons/0/07/Stora_Enso_web_logo.png"alt="test logo"></div><divclass="text">TEXT</div></div>