| <!DOCTYPE html> | |
| <style> | |
| html { | |
| height: 100%; | |
| } | |
| body { | |
| height: 100%; | |
| margin: 0px; | |
| } | |
| .container { | |
| height: 100%; | |
| display: flex; | |
| } | |
| .middle { | |
| flex-grow: 1; | |
| flex-direction: column; | |
| } | |
| .inner { | |
| background-color: green; | |
| height: -webkit-fill-available; | |
| width: 100px; | |
| } | |
| </style> | |
| <!-- PASS if the box does expand all the way to the bottom of viewport --> | |
| <div class=container><div class=middle><div class=inner> |