p { margin: .5rem 0 .5rem 0; } .quote { margin-left: 2em; } .box { border: solid black 1px; padding: 0.5em 1em; clear: both; margin: 1.0em 0; overflow: auto; } .centered { margin-left: auto; margin-right: auto; width: fit-content; } .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; }