Child with max-height 100 overflows parent

Question

I m trying to understand what appears to be unexpected behaviour to me   I have an element with a max-height of 100  inside a container that also uses a max-height but  unexpectedly  the child overflows the parent    Test case  http   jsfiddle net bq4Wu 16    container         background  blue       padding  10px       max-height  200px       max-width  200px      img        display  block      max-height  100        max-width  100        This is fixed  however  if the parent is given an explicit height    Test case  http   jsfiddle net bq4Wu 17    container         height  200px      Does anyone know why the child would not honour the max-height of its parent in the first example  Why is an explicit height required

User · Answer

Here is a solution for a recently opened question marked as a duplicate of this question. The <img> tag was exceeding the max-height of the parent <div>.

Broken: Fiddle

Working: Fiddle

In this case, adding display:flex to the 2 parent <div> tags was the answer

User · Answer

Maybe someone else can explain the reasons behind your problem but you can solve it by specifying the height of the container and then setting the height of the image to be 100   It is important that the width of the image appears before the height    lt html gt       lt head gt           lt style gt               container                     background  blue                   padding  10px                  height  100                   max-height  200px                   max-width  300px                               container img                   width  100                   height  100                         lt  style gt       lt  head gt       lt body gt           lt div class  container  gt               lt img src  http   placekitten com 400 500    gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

The closest I can get to this is this example   http   jsfiddle net YRFJQ 1   or   container       background  blue     border  10px solid blue     max-height  200px     max-width  200px     overflow hidden    box-sizing border-box     img      display  block    max-height  100      max-width  100        The main problem is that the height takes the percentage of the containers height  so it is looking for an explicitly set height in the parent container  not it s max-height   The only way round this to some extent I can see is the fiddle above where you can hide the overflow  but then the padding still acts as visible space for the image to flow into  and so replacing with a solid border works instead  and then adding border-box to make it 200px if that s the width you need   Not sure if this would fit with what you need it for  but the best I can seem to get to

User · Answer

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

User · Answer

x000D   x000D   container   x000D    background  blue  x000D    padding  10px  x000D    max-height  200px  x000D    max-width  200px  x000D    float  left  x000D    margin-right  20px  x000D    x000D   x000D   img1   x000D    display  block  x000D    max-height  100   x000D    max-width  100   x000D    x000D   x000D   img2   x000D    display  block  x000D    max-height  inherit  x000D    max-width  inherit  x000D    x000D   lt  -- example 1  -- gt  x000D   lt div class  container  gt  x000D     lt img class  img1  src  http   via placeholder com 350x450    gt  x000D   lt  div gt  x000D   x000D   lt  -- example 2  -- gt  x000D   x000D   lt div class  container  gt  x000D     lt img class  img2  src  http   via placeholder com 350x450    gt  x000D   lt  div gt  x000D   x000D   x000D    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

User · Answer

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

User · Answer

Your container does not have a height   Add     height  200px   to the containers css and the kitty will stay inside

User · Answer

Containers will already generally wrap their content nicely  It often doesn t work as well the other way around  children don t fill their ancestors nicely  So  set your width height values on the inner-most element rather than the outer-most element  and let the outer elements wrap their contents    container       background  blue      padding  10px     img       display  block      max-height  200px      max-width  200px

User · Answer

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

User · Answer

A good solution is to not use height on the parent and use it just on the child with View Port    Fiddle Example  https   jsfiddle net voan3v13 1   body  html     width  100     height  100      parent     width  400px    background  green      child     max-height  40vh    background  blue    overflow-y  scroll

User · Answer

http   jsfiddle net mpalpha 71Lhcb5q   x000D   x000D   container     display  flex    background  blue     padding  10px     max-height  200px     max-width  200px      img     object-fit  contain    max-height  100      max-width  100      x000D   lt div class  container  gt     lt img src  http   placekitten com 400 500    gt   lt  div gt  x000D   x000D   x000D

User · Answer

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    lt div class  flex-content  gt     lt div class  scrollable-content-wrapper  gt       lt div class  scrollable-content  gt        1  2  3      lt  div gt      lt  div gt   lt  div gt     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

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

Examples related to css