Chrome Safari not filling 100 height of flex parent

Question

I want to have a vertical menu with a specific height   Each child must fill the height of the parent and have middle-aligned text   The number of children is random  so I have to work with dynamic values   Div  container contains a random number of children   item  that always have to fill the height of the parent  To achieve that I used flexbox     For making links with text aligned to the middle I am using display  table-cell technique  But using table displays requires using a height 100    My problem is that  item-inner   height  100    is not working in webkit  Chrome       Is there a fix for this problem     Or is there a different technique to make all  item fill the height of the parent with text vertical aligned to middle    Example here jsFiddle  should be viewed in Firefox and Chrome   x000D   x000D   container   x000D    height  20em  x000D    display  flex  x000D    flex-direction  column  x000D    border  5px solid black x000D    x000D   item   x000D    flex  1  x000D    border-bottom  1px solid white  x000D    x000D   item-inner   x000D    height  100   x000D    width  100   x000D    display  table  x000D    x000D  a   x000D    background  orange  x000D    display  table-cell  x000D    vertical-align  middle  x000D    x000D   lt div class  container  gt  x000D     lt div class  item  gt  x000D       lt div class  item-inner  gt  x000D         lt a gt Button lt  a gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt div class  item  gt  x000D       lt div class  item-inner  gt  x000D         lt a gt Button lt  a gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt div class  item  gt  x000D       lt div class  item-inner  gt  x000D         lt a gt Button lt  a gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Accepted Answer

Solution  Use nested flex containers   Get rid of percentage heights  Get rid of table properties  Get rid of vertical-align  Avoid absolute positioning  Just stick with flexbox all the way through   Apply display  flex to the flex item   item   making it a flex container  This automatically sets align-items  stretch  which tells the child   item-inner  to expand the full height of the parent   Important  Remove specified heights from flex items for this method to work  If a child has a height specified  e g  height  100    then it will ignore the align-items  stretch coming from the parent  For the stretch default to work  the child s height must compute to auto  full explanation     Try this  no changes to HTML     x000D   x000D   container   x000D      display  flex  x000D      flex-direction  column  x000D      height  20em  x000D      border  5px solid black x000D    x000D   x000D   item   x000D      display  flex                          new  nested flex container    x000D      flex  1  x000D      border-bottom  1px solid white  x000D    x000D   x000D   item-inner   x000D      display  flex                          new  nested flex container    x000D      flex  1                                new    x000D   x000D         height  100                       lt -- remove  unnecessary    x000D         width  100                        lt -- remove  unnecessary    x000D         display  table                    lt -- remove  unnecessary      x000D    x000D   x000D  a   x000D      display  flex                          new  nested flex container    x000D      flex  1                                new    x000D      align-items  center                    new  vertically center text    x000D      background  orange  x000D   x000D         display  table-cell               lt -- remove  unnecessary    x000D         vertical-align  middle            lt -- remove  unnecessary    x000D    x000D   lt div class  container  gt  x000D     lt div class  item  gt  x000D       lt div class  item-inner  gt  x000D         lt a gt Button lt  a gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt div class  item  gt  x000D       lt div class  item-inner  gt  x000D         lt a gt Button lt  a gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt div class  item  gt  x000D       lt div class  item-inner  gt  x000D         lt a gt Button lt  a gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    jsFiddle demo    Explanation     My problem is that  item-inner   height  100    is not working in   webkit  Chrome     It s not working because you re using percentage height in a way that doesn t conform with the traditional implementation of the spec      10 5 Content height  the height property      percentage Specifies a percentage height  The percentage is calculated with respect to the height of the generated box s   containing block  If the height of the containing block is not   specified explicitly and this element is not absolutely positioned  the value computes to auto       auto The height depends on the values of other properties    In other words  for percentage height to work on an in-flow child  the parent must have a set height   In your code  the top-level container has a defined height   container   height  20em     The third-level container has a defined height   item-inner   height  100      But between them  the second-level container  ndash   item  ndash  does not have a defined height  Webkit sees that as a missing link    item-inner is telling Chrome  give me height  100   Chrome looks to the parent   item  for reference and responds  100  of what  I don t see anything  ignoring the flex  1 rule that is there   As a result  it applies height  auto  content height   in accordance with the spec   Firefox  on the other hand  now accepts a parent s flex height as a reference for the child s percentage height  IE11 and Edge accept flex heights  as well   Also  Chrome will accept flex-grow as an adequate parent reference if used in conjunction with flex-basis  any numerical value works  auto won t   including flex-basis  0   As of this writing  however  this solution fails in Safari    x000D   x000D   outer   x000D    display  flex  x000D    flex-direction  column  x000D    height  300px  x000D    background-color  white  x000D    border  1px solid red  x000D    x000D   middle   x000D    flex-grow  1  x000D    flex-basis  1px  x000D    background-color  yellow  x000D    x000D   inner   x000D    height  100   x000D    background-color  lightgreen  x000D    x000D   lt div id  outer  gt  x000D     lt div id  middle  gt  x000D       lt div id  inner  gt  x000D        INNER x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      Four Solutions  1  Specify a height on all parent elements  A reliable cross-browser solution is to specify a height on all parent elements  This prevents missing links  which Webkit-based browsers consider a violation of the spec   Note that min-height and max-height are not acceptable  It must be the height property   More details here   Working with the CSS height property and percentage values  2  CSS Relative  amp  Absolute Positioning  Apply position  relative to the parent and position  absolute to the child    Size the child with height  100  and width  100   or use the offset properties  top  0  right  0  bottom  0  left  0   With absolute positioning  percentage height works without a specified height on the parent   3  Remove unnecessary HTML containers  recommended   Is there a need for two containers around button  Why not remove  item or  item-inner  or both  Although button elements sometimes fail as flex containers  they can be flex items  Consider making button a child of  container or  item  and removing gratuitous mark-up   Here s an example    x000D   x000D   container   x000D      height  20em  x000D      display  flex  x000D      flex-direction  column  x000D      border  5px solid black x000D    x000D   x000D  a   x000D      flex  1  x000D      background  orange  x000D      border-bottom  1px solid white  x000D      display  flex                       nested flex container  for aligning text     x000D      align-items  center                 center text vertically    x000D      justify-content  center             center text horizontally    x000D    x000D   lt div class  container  gt  x000D       lt a gt Button lt  a gt  x000D       lt a gt Button lt  a gt  x000D       lt a gt Button lt  a gt  x000D   lt  div gt  x000D   x000D   x000D    4  Nested Flex Containers  recommended   Get rid of percentage heights  Get rid of table properties  Get rid of vertical-align  Avoid absolute positioning  Just stick with flexbox all the way through   Apply display  flex to the flex item   item   making it a flex container  This automatically sets align-items  stretch  which tells the child   item-inner  to expand the full height of the parent   Important  Remove specified heights from flex items for this method to work  If a child has a height specified  e g  height  100    then it will ignore the align-items  stretch coming from the parent  For the stretch default to work  the child s height must compute to auto  full explanation     Try this  no changes to HTML     x000D   x000D   container   x000D      display  flex  x000D      flex-direction  column  x000D      height  20em  x000D      border  5px solid black x000D    x000D   x000D   item   x000D      display  flex                          new  nested flex container    x000D      flex  1  x000D      border-bottom  1px solid white  x000D    x000D   x000D   item-inner   x000D      display  flex                          new  nested flex container    x000D      flex  1                                new    x000D   x000D         height  100                       lt -- remove  unnecessary    x000D         width  100                        lt -- remove  unnecessary    x000D         display  table                    lt -- remove  unnecessary      x000D    x000D   x000D  a   x000D      display  flex                          new  nested flex container    x000D      flex  1                                new    x000D      align-items  center                    new  vertically center text    x000D      background  orange  x000D   x000D         display  table-cell               lt -- remove  unnecessary    x000D         vertical-align  middle            lt -- remove  unnecessary    x000D    x000D   lt div class  container  gt  x000D     lt div class  item  gt  x000D       lt div class  item-inner  gt  x000D         lt a gt Button lt  a gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt div class  item  gt  x000D       lt div class  item-inner  gt  x000D         lt a gt Button lt  a gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D     lt div class  item  gt  x000D       lt div class  item-inner  gt  x000D         lt a gt Button lt  a gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    jsFiddle

User · Answer

For Mobile Safari There is a Browser fix  you need to add -webkit-box for iOS devices   Ex   display  flex  display  -webkit-box  flex-direction  column  -webkit-box-orient  vertical  -webkit-box-direction  normal  -webkit-flex-direction  column  align-items  stretch    if you re using align-items  stretch  property for parent element   remove the height   100  from the child element

User · Answer

Solution  Remove height  100  in  item-inner and add display  flex in  item  Demo  https   codepen io tronghiep92 pen NvzVoo

User · Answer

I had a similar bug  but while using a fixed number for height and not a percentage  It was also a flex container within the body  which has no specified height   It appeared that on Safari  my flex container had a height of 9px for some reason  but in all other browsers it displayed the correct 100px height specified in the stylesheet    I managed to get it to work by adding both the height and min-height properties to the CSS class   The following worked for me on both Safari 13 0 4 and Chrome 79 0 3945 130    flex-container     display  flex    flex-direction  column    min-height  100px    height  100px      Hope this helps

User · Answer

I have had a similar issue in iOS 8  9 and 10 and the info above couldn t fix it  however I did discover a solution after a day of working on this  Granted it won t work for everyone but in my case my items were stacked in a column and had 0 height when it should have been content height  Switching the css to be row and wrap fixed the issue  This only works if you have a single item and they are stacked but since it took me a day to find this out I thought I should share my fix    wrapper       flex-direction  column      lt -- Remove this line     flex-direction  row      lt -- replace it with     flex-wrap  wrap      lt -- Add wrapping     item       width  100

User · Answer

Specifying a flex attribute to the container worked for me    container       flex  0 0 auto      This ensures the height is set and doesn t grow either

[css] Chrome / Safari not filling 100% height of flex parent

Solution

Explanation

Four Solutions

jsFiddle

Examples related to css

Examples related to google-chrome

Examples related to webkit

Examples related to flexbox