https://github.com/rofrol/flexbox-height-expand

https://github.com/rofrol/flexbox-height-expand

Last synced: 6 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/rofrol/flexbox-height-expand
• Owner: rofrol
• License: apache-2.0
• Created: 2018-08-13T09:25:20.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-13T09:54:01.000Z (almost 8 years ago)
• Last Synced: 2025-09-29T16:02:58.790Z (10 months ago)
• Language: HTML
• Size: 14.6 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# flexbox-height-expand

## Problem

Chrome/Safari needs `height` set in percentages for parent, if child has set `height` in percentages. It works in Firefox.

But when `#outer` has `height: 100vh`, then `#bottom` with `height 100%` and `flex-basis: auto` has `height` equal to `100vh` and that is why you can see scrollbar on the screenshot.

![](/screenshot.png)

## Solutions

1. Do not use `height: 100vh` on `#outer` and add `height: 100%;` to `#bottom`.

2. Change `flex-basis: 0` in `#bottom`.

- https://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent