vertically center element when height is smaller than container, but make height 100% when container height is smaller

Question

I am trying to create a layout where an element (.figure) is center aligned when it is shorter (in height) than its container (.timeline-content). But I want the element to have the same height as its container when it is longer than its container.

The height of the container itself depends on its parent.

This image should help clarify the desired behavior. This is what I have right now, I don't quite understand why img extends past its parent even though its max-height: 100%

https://jsfiddle.net/kgdkyte4/3/

 html{ position: relative; } .timeline-item{ width: 100%; overflow:hidden } .timeline-content{ width: 50%; float: left; text-align: right; } .timeline-image{ display:flex; align-items: center; position:absolute; right: 0; width: 50%; height:100%; } .figure{ width:100%; max-height: 100%; margin: 0; position:relative; } img{ max-height:100%; max-width:100%; float:left; } 

 <div class="timeline-item"> <div class="timeline-content"> <h3 class="timeline-title">Blah blah blah </h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ornare sem. In sodales ac nisl facilisis pharetra. Nam non pellentesque mauris. Proin scelerisque, sapien non scelerisque auctor, nunc erat condimentum est, viverra dapibus dui odio a neque. Mauris est dui, posuere at urna in, gravida tincidunt odio. Integer quis egestas est. Praesent tincidunt justo nec nibh malesuada ullamcorper. Nulla convallis et quam vitae posuere. </p> </div> <div class="timeline-image"> <figure class="figure"> <img src="http://via.placeholder.com/550x900"> <figcaption class="figure-caption">blah </figcaption> </figure> </div> </div> 

Answer 1

Without knowing what you're trying to accomplish with the caption, this is the closest I've gotten . Update info on the caption and I'll see what more I can do.

 *{ box-sizing:border-box; margin:0; padding:0; } .timeline-item{ width: 100%; position:relative; } .timeline-leftbox{ width:50%; text-align:right; padding:0 8px; } .timeline-rightbox{ position:absolute; height:100%; width:50%; top:0; right:0; overflow:hidden; white-space:nowrap; } .timeline-rightbox::after{ content:""; display:inline-block; height:100%; width:0; vertical-align:middle; } .timeline-rightbox img{ max-height:100%; max-width:100%; width:auto; height:auto; vertical-align:middle; } 

 <div class="timeline-item"> <div class="timeline-leftbox"> <div> <h3 class="timeline-title">Blah blah blah</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ornare sem. In sodales ac nisl facilisis pharetra. Nam non pellentesque mauris. Proin scelerisque, sapien non scelerisque auctor, nunc erat condimentum est, viverra dapibus dui odio a neque. Mauris est dui, posuere at urna in, gravida tincidunt odio. Integer quis egestas est. Praesent tincidunt justo nec nibh malesuada ullamcorper. Nulla convallis et quam vitae posuere. </p> </div> </div> <div class="timeline-rightbox"> <img src="http://via.placeholder.com/550x900" /> </div> </div> 

---

You can create a caption space under the image using calc css:

https://jsfiddle.net/freer4/r08ujx5p/3/