css - Child with max-height: 100% overflows parent

ID : 20107

viewed : 10

Tags : csscss

Top 5 Answer for css - Child with max-height: 100% overflows parent

vote vote

90

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, oddly enough. The same applies to max-width.

So, when you don't specify an explicit height on the parent, then there's no base height for the child's max-height to be calculated from, so max-height computes to none, allowing the child to be as tall as possible. The only other constraint acting on the child now is the max-width of its parent, and since the image itself is taller than it is wide, it overflows the container's height downwards, in order to maintain its aspect ratio while still being as large as possible overall.

When you do specify an explicit height for the parent, then the child knows it has to be at most 100% of that explicit height. That allows it to be constrained to the parent's height (while still maintaining its aspect ratio).

vote vote

90

.container {    background: blue;    padding: 10px;    max-height: 200px;    max-width: 200px;    float: left;    margin-right: 20px;  }    .img1 {    display: block;    max-height: 100%;    max-width: 100%;  }    .img2 {    display: block;    max-height: inherit;    max-width: inherit;  }
<!-- example 1  -->  <div class="container">    <img class='img1' src="http://via.placeholder.com/350x450" />  </div>    <!-- example 2  -->    <div class="container">    <img class='img2' src="http://via.placeholder.com/350x450" />  </div>

I played around a little. On a larger image in firefox, I got a good result with using the inherit property value. Will this help you?

.container {     background: blue;     padding: 10px;     max-height: 100px;     max-width: 100px;     text-align:center; }  img {     max-height: inherit;     max-width: inherit; } 
vote vote

71

Instead of going with max-height: 100%/100%, an alternative approach of filling up all the space would be using position: absolute with top/bottom/left/right set to 0.

In other words, the HTML would look like the following:

<div class="flex-content">   <div class="scrollable-content-wrapper">     <div class="scrollable-content">       1, 2, 3     </div>    </div> </div> 
.flex-content {   flex-grow: 1;   position: relative;   width: 100%;   height: 100%; }  .scrollable-content-wrapper {   position: absolute;   left: 0;   right: 0;   top: 0;   bottom: 0;   overflow: auto; }  .scrollable-content { } 

You can see a live example at Codesandbox - Overflow within CSS Flex/Grid

vote vote

63

I found a solution here: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

The trick is possible because it exists a relation between WIDTH and PADDING-BOTTOM of an element. So:

parent:

container {   height: 0;   padding-bottom: 66%; /* for a 4:3 container size */   } 

child (remove all css related to width, i.e. width:100%):

img {   max-height: 100%;   max-width: 100%;   position: absolute;        display:block;   margin:0 auto; /* center */   left:0;        /* center */   right:0;       /* center */   } 
vote vote

60

You can use the property object-fit

.cover {     object-fit: cover;     width: 150px;     height: 100px; } 

Like suggested here

A full explanation of this property by Chris Mills in Dev.Opera

And an even better one in CSS-Tricks

It's supported in

  • Chrome 31+
  • Safari 7.1+
  • Firefox 36+
  • Opera 26+
  • Android 4.4.4+
  • iOS 8+

I just checked that vivaldi and chromium support it as well (no surprise here)

It's currently not supported on IE, but... who cares ? Also, iOS supports object-fit, but not object-position, but it will soon.

Top 3 video Explaining css - Child with max-height: 100% overflows parent

Related QUESTION?