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

the skinny: there way make max-height on image obey fixed height of ancestor is not direct parent?

---

i understand max-height needs fixed height calculate from, not duplicate of questions asking why max-height doesn't magically work.

i have element (.rightbox) has 100% height , absolutely positioned inside auto-height container. element conforms expected height.

that element has child max-height of 100%. element conforms expected height, since .rightbox parent has set height (% + absolute positioning)

but now... have image inside that container... , doesn't conform max-height. think having ancestor calculable height allow element conform max-height.

max-width works, , believe it's using same ancestor calculate width.

setting px height on .rightbox has no effect.

removing div between .rightbox , img causes img conform 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 />    text make bigger.    </p>    </div>    <div class="rightbox">      <div>        <img src="http://via.placeholder.com/550x900" />      </div>    </div>  </div>

this answer helps figure out:

when specify percentage max-height on child, percentage of parent's actual height, not parent's max-height

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

then, yes, can make max-height on image obey fixed height of ancestor but direct parent has have a defined height in percentage, not max-height.

here, example, switched max-height parameter of parent div of image height parameter of 100%, (tested on chrome version 59)

*{    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 />    text make bigger.    </p>    </div>    <div class="rightbox">      <div>        <img src="http://via.placeholder.com/550x900" />      </div>    </div>  </div>

have nice day!