I am trying to vertically center an element while also making it as tall as possible within a bound. This way it can react to siblings taking up space or the screen shrinking, but remains vertically centered on larger screens.
I expected there to be a 200 px tall green block vertically centered in the screen.
What Actually Happened
There is a very short green block vertically centered in the screen.
I have tested this on two setups, and it is only broken on one of them. It is broken on Ubuntu 16.04 LTS with Firefox 56.0 (64-bit). It works as I expect (is 200 px tall) on Safari/macOS.
The big picture of what I'm trying to do
I am trying to vertically center an element while also making it as tall as possible within a bound. This way it can react to siblings taking up space or the screen shrinking, but remains vertically centered on larger screens.
What I did
https://ellie-app.com/4G2dty9Jba1/0 In short:
el Background [verticalCenter, height fill, maxHeight <| px 200]What I Expected To Happen
I expected there to be a 200 px tall green block vertically centered in the screen.
What Actually Happened
There is a very short green block vertically centered in the screen.
I have tested this on two setups, and it is only broken on one of them. It is broken on Ubuntu 16.04 LTS with Firefox 56.0 (64-bit). It works as I expect (is 200 px tall) on Safari/macOS.
Versions