1 files changed, 39 insertions, 16 deletions

diff --git a/src/content/style.css b/src/content/style.css
index 58db85f..fca0f01 100644
--- a/src/content/style.css
+++ b/src/content/style.css
@@ -248,26 +248,49 @@ pre.lineno {
   background-color: var(--color-code-bg);
 }
 
-/* A line wider than the page scrolls inside the box that frames it.
-   Saying so on the pre alone does nothing: the numbers sit in a table
-   cell beside the code, and a table grows to fit what it holds, so
-   the pre is never narrower than its longest line and never has
-   anything to scroll.  The box scrolls instead, numbers and all.
+/* A line wider than the page scrolls, and only the code does, so the
+   numbers stay where they are.
+   
+   Saying "overflow" on the pre alone does nothing while the two sit
+   in a table: a table grows to fit what it holds, so the pre is never
+   narrower than its longest line and never has anything to scroll.
+   Telling the cell it may be narrower is a hint a table is free to
+   ignore, and Firefox ignores it.  A row laid out as a flex line is
+   not: "min-width: 0" there is honoured, and the code finally has a
+   box smaller than its content to scroll inside.
+   
+   Pinning the numbers instead --- leaving them in the scrolling box
+   and sticking them to its edge --- was tried and taken out.  Nothing
+   uncovers them, but a scroll draws the two out of step for a frame
+   and the code is seen crossing them. */
+.listingblock table,
+.listingblock tbody {
+  display: block;
+}
 
-   Pinning the numbers so they stay while the code moves was tried
-   and taken out.  Nothing covers them: at rest the cell's background
-   reaches exactly to where the code begins, but a scroll draws the
-   two out of step for a frame and the code is seen crossing them.
-   Constraining the cell instead, so that only the code scrolls,
-   needs a max-width on a table cell, which is a hint a browser may
-   ignore --- and Firefox does, whereupon the block stops containing
-   its own lines again. */
-.highlight, .listingblock .content {
+.listingblock tr {
+  display: flex;
+}
+
+.listingblock td {
+  display: block;
+}
+
+.listingblock td:first-child {
+  flex: 0 0 auto;
+}
+
+.listingblock td:last-child {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.listingblock td:last-child pre {
   overflow-x: auto;
 }
 
-.listingblock table {
-  border-collapse: collapse;
+.highlight {
+  overflow-x: auto;
 }
 
 pre {