Fix firefox overflow (#3806)

* Fix firefox overflow

MIght fix...

* Add comment

* Align
This commit is contained in:
Bram Kragten 2019-09-25 21:52:21 +02:00 committed by GitHub
parent 886c6dd88c
commit 111d1afc21
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -354,18 +354,26 @@ class HUIRoot extends LitElement {
#view { #view {
min-height: calc(100vh - 112px); min-height: calc(100vh - 112px);
/** /**
* Since we only set min-height, if child nodes need percentage * Since we only set min-height, if child nodes need percentage
* heights they must use absolute positioning so we need relative * heights they must use absolute positioning so we need relative
* positioning here. * positioning here.
* *
* https://www.w3.org/TR/CSS2/visudet.html#the-height-property * https://www.w3.org/TR/CSS2/visudet.html#the-height-property
*/ */
position: relative; position: relative;
display: flex; display: flex;
} }
#view > * { #view > * {
flex: 1; /**
width: 100%; * The view could get larger than the window in Firefox
* to prevent that we set the max-width to 100%
* flex-grow: 1 and flex-basis: 100% should make sure the view
* stays full width.
*
* https://github.com/home-assistant/home-assistant-polymer/pull/3806
*/
flex: 1 1 100%;
max-width: 100%;
} }
#view.tabs-hidden { #view.tabs-hidden {
min-height: calc(100vh - 64px); min-height: calc(100vh - 64px);