p { margin: 1ex 0; } .quote { margin-left: 2em; } .box { border: solid black 1px; padding: 0.5em 1em; clear: both; margin: 1.0em 0; overflow: auto; } .center { text-align: center; } .indent { margin-left: 2rem; } /* @vfill: LaTeX's \vfill glue as flex-grow. The :has() rule turns the text column into a flex column ONLY in documents that use @vfill (flex containers do not collapse vertical margins, so paragraph spacing shifts slightly there); several vfills share the free space equally, like \vfill. The min-height ties the fill to the window: with a title or status bar the column overshoots by their height (a small scroll); content taller than the window collapses the glue, as on a full LaTeX page. Fills the window, not a browser-printed page. */ #text:has(.vfill) { display: flex; flex-direction: column; min-height: calc(100vh - 1lh); } /* One line of whitespace below the filled content, so the last block does not touch the bottom of the window. A margin on the last flex item, not #text padding: #middle's overflow clips the padding. */ #text:has(.vfill) > :last-child { margin-bottom: 1lh; } .vfill { flex-grow: 1; } .left_right { display: inline-block; width: calc((100vw - 60px) / 2); }