HTML5 flexible box model height calculation

by

I’ve been wrestling with this myself, but have finally managed to come up with a solution.

See this jsFiddle, although I have only added webkit prefixes so open in Chrome.

You basically have 2 issues which I will deal with separately.

  1. Getting the child of a flex-item to fill height 100%
    • Set position:relative; on the parent of the child.
    • Set position:absolute; on the child.
    • You can then set width/height as required (100% in my sample).
  2. Fixing the resize scrolling “quirk” in Chrome
    • Put overflow-y:auto; on the scrollable div.
    • The scrollable div must have an explicit height specified. My sample already has height 100% but if none is already applied you can specify height:0;

See this answer for more information on the scrolling issue.

More Related Contents:

  1. How to make double border on left only with thick outside and thin inside [duplicate]
  2. Why my HTML input field is ‘readonly’ by default [closed]
  3. Bootstrap height
  4. Centering in CSS Grid
  5. How to show google.com in an iframe?
  6. Canvas width and height in HTML5
  7. How to style the parent element when hovering a child element?
  8. How to make this arrow in CSS only?
  9. Stop browsers asking to resend form data on refresh
  10. Bootstrap 3 two columns full height
  11. Why does IE9 switch to compatibility mode on my website?
  12. Maintain image aspect ratio when changing height
  13. Why should I use ‘li’ instead of ‘div’?
  14. How to draw a rounded rectangle using HTML Canvas?
  15. How do HTML parses work if they’re not using regexp?
  16. How to change the length/position of text-decoration:underline?
  17. Make a nav bar stick
  18. How to prevent Chrome from changing font when autofilling username/password?
  19. Label text is wrapped but not indent second line
  20. Remove .html and .php extensions with .htaccess
  21. Pressing spacebar scrolls page down?
  22. Why is box-sizing acting different on table vs div?
  23. Is this empty space actually margin-right which is not recognized by dev tools?
  24. Understanding CSS2.1 specification regarding height on inline-level boxes
  25. How do I give a CSS class priority over an id?
  26. Padding the top and the bottom of inline element
  27. Set the select option as blank as default in HTML select element
  28. Scale path from center
  29. Change image on hover
  30. Setting the granularity of the HTML5 audio event ‘timeupdate’

Leave a Comment