I am trying to achieve a layout where an element (.figure) is centered horizontally when it is shorter than its container (.timeline-content), but matches the height of its container when longer.
The height of the container changes based on its parent.
This image illustrates the desired behavior. I am facing an issue where the img extends past its parent even though its max-height is set to 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>