Max-height image inside max-height div inside fixed height div

Question

The skinny: Is there a way to make max-height on the image obey the fixed height of an ancestor that is not its direct parent?

I understand that max-height needs a fixed height to calculate from, so this is not a duplicate of questions asking why max-height doesn't magically work.

I have an element (.rightbox) that has 100% height and is absolutely positioned inside an auto-height container. This element conforms to the expected height.

That element then has a child with a max-height of 100%. This element also conforms to the expected height, since the .rightbox parent has a set height (% + absolute positioning)

But now... I have an image inside that container... and it doesn't conform to the max-height. I would think that having an ancestor with a calculable height would allow that element to conform to the max-height.

Max-width works, and I believe it's using that same ancestor to calculate width.

Setting a px height on .rightbox has no effect.

Removing the div between the .rightbox and the img causes the img to conform to the desired max-height.

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.item{
  width: 100%;
  position:relative;
  background:#0FF;
}
.rightbox::after{
  content:"";
  display:inline-block;
  height:100%;
  width:0;
  vertical-align:middle;
}
.rightbox>div{
  display:inline-block;
  vertical-align:middle;
}

.rightbox{
  position:absolute;
  height:100%;
  width:50%;
  top:0;
  right:0;
}
.rightbox>div,
.rightbox img{
  max-height:100%;
  max-width:100%;
}
.rightbox img{
  opacity:0.7;
}

<div class="item">
  <div>
  <p>
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  Some text to make this bigger.
  </p>
  </div>
  <div class="rightbox">
    <div>
      <img src="http://via.placeholder.com/550x900" />
    </div>
  </div>
</div>

Tim Krief · Accepted Answer · 2018-02-24T11:00:25.453

This answer helps to figure this out:

When you specify a percentage for max-height on a child, it is a percentage of the parent's actual height, not the parent's max-height

https://stackoverflow.com/a/14263416/2735479

Then, yes, we can make max-height on the image obey the fixed height of an ancestor but the direct parent has to have a defined height in percentage, not just a max-height.

Here, for example, I switched the max-height parameter of the parent div of the image for an height parameter of 100%, (tested on Mozilla Firefox version 58)

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.item{
  width: 100%;
  position:relative;
  background:#0FF;
}
.rightbox::after{
  content:"";
  display:inline-block;
  height:100%;
  width:0;
  vertical-align:middle;
}
.rightbox>div{
  display:inline-block;
  vertical-align:middle;
}

.rightbox{
  position:absolute;
  height:100%;
  width:50%;
  top:0;
  right:0;
}
.rightbox>div{
  height:100%;
  max-width:100%;
}
.rightbox img{
  max-height:100%;
  max-width:100%;
}
.rightbox img{
  opacity:0.7;
}

<div class="item">
  <div>
  <p>
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  Some text to make this bigger.
  </p>
  </div>
  <div class="rightbox">
    <div>
      <img src="http://via.placeholder.com/550x900" />
    </div>
  </div>
</div>

Have a nice day!

Please don't provide link-only answers; instead, put the most important bits to your answer directly. — YakovL, Jul 25 '17 at 23:40
Yes, definitely better, thanks; now since this is an answer, not a comment, please answer the actual question: "Is there a way to ..." Which can be answered by "no, there isn't, because ..." or "yes, here it is: ..." — YakovL, Jul 26 '17 at 09:32
@TimKrief well done, and thanks for your patience and learning. Now in this particular question, it seems that you may propose certain CSS changes and hence show them how to fix the issue. If you add a SO snippet with their code modified to fix the issue, it becomes apparent that you proposed a correct solution and the answer should be accepted; if you do this, I'll upvote anyway. — YakovL, Jul 28 '17 at 13:59

Max-height image inside max-height div inside fixed height div

1 Answers1