Force div to match parent's height not including itself

Question

I have a flexbox of two divs: the left one is a container for some text, and the right one is a container for an image. I am using a flexbox because I want the text div to take up 2/3 of the width, and the image to take up 1/3rd, regardless of the parent width.

<div id="parent">
  <div id="txtContainer">
    <p>This is some text! It will have some height.</p>
    <p>I'm adding multiple lines to show that.</p>
    <p>I hope you're having a wonderful day, whoever you are :)</p>
  </div>
  <div id="imgContainer">
    <img id="img" src="https://cdn.pixabay.com/photo/2021/02/17/23/02/tiger-6025561_960_720.jpg">
  </div>
</div>

#parent {
  display: flex;
  width: 100%;
}

#txtContainer {
  background-color: lime;
  flex-basis: 0;
  flex-grow: 2;
}

#imgContainer {
  background-color: red;
  flex-basis: 0;
  flex-grow: 1;
}

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

I would like for both the text container and the overall parent to have a height that will fit the text exactly, without any extra space at the bottom. This means the height of everything, including the image container, would be determined by the height of the text. I would like for the image to fill as much of its container as possible without extending past the height of the text.

Visually, instead of this: NOT what I want (current behavior)

I want this: What I would like, photoshopped

Here's a demo of how it works now: https://jsbin.com/hoqufutuya/1/edit?html,css,output

I have tried setting height: 100% on everything involved. I've also tried some different positions and margins, all to no avail. Unfortunately I'm not very good with CSS, so I'm stuck. I was not able to find help on google or SO.

Thank you for your time.

a.mola · Answer 1 · 2021-03-13T00:42:06.983

0

I changed the object-fit property of the image to cover because I figured that's the only way to force the image to scale to that height while not overflowing the width.

The only problem though is the image could get scaled so largely the important parts of the image may not be seen again.

If that's not a problem, then I hope the answer works out for you.

#parent {
  display: flex;
}

#parent>* {
flex-basis: 0;
}

#txtContainer {
flex-grow: 2;
  background-color: lime;
}

#imgContainer {
flex-grow: 1;
  background-color: red;
}

#img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

<div id="parent">
  <div id="txtContainer">
    <p>This is some text! It will have some height.</p>
    <p>I'm adding multiple lines to show that.</p>
    <p>I hope you're having a wonderful day, whoever you are :)</p>
  </div>
  <div id="imgContainer">
    <img id="img" src="https://cdn.pixabay.com/photo/2021/02/17/23/02/tiger-6025561_960_720.jpg">
  </div>
</div>

edited Mar 13 '21 at 00:42

answered Mar 13 '21 at 00:22

a.mola

3,883
7
23

Thanks for your comment! I tried that, but unfortunately it didn't seem to make a difference. I tried both `align-self: stretch;` and `align-items: stretch;` (from the link you provided) on both the image itself and the container for the image, but neither had the desired effect. Did I misinterpret what you meant? – Isaac Chen Mar 13 '21 at 00:30
I created a snippet for my second attempt @IsaacChen, check out the edited answer – a.mola Mar 13 '21 at 00:42
Hmm... I run your code snippet, and seemed to look the same. [Here is a screenshot](https://imgur.com/wlzPUeI.png) of what I see. Note how the text area is extended to match the height of the image, which is not the goal. I really appreciate your help, if I can clarify anything please let me know... this is my first question! – Isaac Chen Mar 13 '21 at 00:50
The white border is the border of the iframe(i.e The snippet's box). Try the code out on your system for yourself to be sure. As you can see, there's no red background from the image – a.mola Mar 13 '21 at 00:53
I tested it on my own system, and got the same result. It's worth noting I don't mind the white border, it's the fact that the text area is expanding that is problematic. This was the same on both my own system and jsbin.com – Isaac Chen Mar 13 '21 at 00:59
Then you have to set an absolute width on the parent of the element. That way the text area always takes two-thirds of the parent’s width and the image takes one-third of the width – a.mola Mar 13 '21 at 01:01
Thank you, I actually just found a solution. See my answer below. I really appreciate all of your time and help with this! I upvoted your answer, but it doesn't show since I don't have 15 reputation :) – Isaac Chen Mar 13 '21 at 01:06
Okay then... Good luck – a.mola Mar 13 '21 at 01:07

score -1 · Answer 2 · answered Mar 13 '21 at 01:04

-1

I solved it! I have to set the position to absolute on the image element, and relative on the parent. This "takes it out of the natural flow of the document"

Thanks https://stackoverflow.com/a/7419891/13174545!

answered Mar 13 '21 at 01:04

Isaac Chen

1
1
1

Force div to match parent's height not including itself

2 Answers2