HTML writer: revert to using `width` property for column widths

The default `flex` and `overflow-x` properties of a column are set to
`auto`. In combination, these changes allow to get good results when
using columns with or without explicit widths.

10 files changed, 12 insertions, 12 deletions

diff --git a/data/templates/styles.html b/data/templates/styles.html
index 15f34bf56..776d6a872 100644
--- a/data/templates/styles.html
+++ b/data/templates/styles.html
@@ -164,7 +164,7 @@ $endif$
 code{white-space: pre-wrap;}
 span.smallcaps{font-variant: small-caps;}
 div.columns{display: flex; gap: min(4vw, 1.5em);}
-div.column{flex: 1;}
+div.column{flex: auto; overflow-x: auto;}
 div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
 ul.task-list{list-style: none;}
 ul.task-list li input[type="checkbox"] {
diff --git a/src/Text/Pandoc/Writers/HTML.hs b/src/Text/Pandoc/Writers/HTML.hs
index 24f3e2da4..cdbf11e1e 100644
--- a/src/Text/Pandoc/Writers/HTML.hs
+++ b/src/Text/Pandoc/Writers/HTML.hs
@@ -876,7 +876,7 @@ blockToHtmlInner opts (Div attr@(ident, classes, kvs') bs) = do
   let isCslBibEntry = "csl-entry" `elem` classes
   let kvs = [(k,v) | (k,v) <- kvs'
                    , k /= "width" || "column" `notElem` classes] ++
-            [("style", "flex:" <> w <> ";")  | "column" `elem` classes
+            [("style", "width:" <> w <> ";") | "column" `elem` classes
                                              , ("width", w) <- kvs'] ++
             [("role", "doc-bibliography") | isCslBibBody && html5] ++
             [("role", "doc-biblioentry") | isCslBibEntry && html5]
diff --git a/test/command/1710.md b/test/command/1710.md
index e65f1be70..64d86cffe 100644
--- a/test/command/1710.md
+++ b/test/command/1710.md
@@ -19,17 +19,17 @@ ok
 <section id="slide-one" class="slide level1">
 <h1>Slide one</h1>
 <div class="columns">
-<div class="column" style="flex:40%;">
+<div class="column" style="width:40%;">
 <ul>
 <li>a</li>
 <li>b</li>
 </ul>
-</div><div class="column" style="flex:40%;">
+</div><div class="column" style="width:40%;">
 <ul>
 <li>c</li>
 <li>d</li>
 </ul>
-</div><div class="column" style="flex:10%;">
+</div><div class="column" style="width:10%;">
 <p>ok</p>
 </div>
 </div>
diff --git a/test/lhs-test.html b/test/lhs-test.html
index ea9681585..76492a50c 100644
--- a/test/lhs-test.html
+++ b/test/lhs-test.html
@@ -149,7 +149,7 @@
     code{white-space: pre-wrap;}
     span.smallcaps{font-variant: small-caps;}
     div.columns{display: flex; gap: min(4vw, 1.5em);}
-    div.column{flex: 1;}
+    div.column{flex: auto; overflow-x: auto;}
     div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
     ul.task-list{list-style: none;}
     ul.task-list li input[type="checkbox"] {
diff --git a/test/lhs-test.html+lhs b/test/lhs-test.html+lhs
index f88dd4700..04e33fcae 100644
--- a/test/lhs-test.html+lhs
+++ b/test/lhs-test.html+lhs
@@ -149,7 +149,7 @@
     code{white-space: pre-wrap;}
     span.smallcaps{font-variant: small-caps;}
     div.columns{display: flex; gap: min(4vw, 1.5em);}
-    div.column{flex: 1;}
+    div.column{flex: auto; overflow-x: auto;}
     div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
     ul.task-list{list-style: none;}
     ul.task-list li input[type="checkbox"] {
diff --git a/test/s5-basic.html b/test/s5-basic.html
index 1d0f8a3f9..cfd3a755d 100644
--- a/test/s5-basic.html
+++ b/test/s5-basic.html
@@ -14,7 +14,7 @@
     code{white-space: pre-wrap;}
     span.smallcaps{font-variant: small-caps;}
     div.columns{display: flex; gap: min(4vw, 1.5em);}
-    div.column{flex: 1;}
+    div.column{flex: auto; overflow-x: auto;}
     div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
     ul.task-list{list-style: none;}
     ul.task-list li input[type="checkbox"] {
diff --git a/test/s5-fancy.html b/test/s5-fancy.html
index 824001b42..4f3cb8194 100644
--- a/test/s5-fancy.html
+++ b/test/s5-fancy.html
@@ -14,7 +14,7 @@
     code{white-space: pre-wrap;}
     span.smallcaps{font-variant: small-caps;}
     div.columns{display: flex; gap: min(4vw, 1.5em);}
-    div.column{flex: 1;}
+    div.column{flex: auto; overflow-x: auto;}
     div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
     ul.task-list{list-style: none;}
     ul.task-list li input[type="checkbox"] {
diff --git a/test/s5-inserts.html b/test/s5-inserts.html
index 58e0c6caa..cafb1c3e5 100644
--- a/test/s5-inserts.html
+++ b/test/s5-inserts.html
@@ -12,7 +12,7 @@
     code{white-space: pre-wrap;}
     span.smallcaps{font-variant: small-caps;}
     div.columns{display: flex; gap: min(4vw, 1.5em);}
-    div.column{flex: 1;}
+    div.column{flex: auto; overflow-x: auto;}
     div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
     ul.task-list{list-style: none;}
     ul.task-list li input[type="checkbox"] {
diff --git a/test/writer.html4 b/test/writer.html4
index ec13d9ded..017da7d1e 100644
--- a/test/writer.html4
+++ b/test/writer.html4
@@ -152,7 +152,7 @@
     code{white-space: pre-wrap;}
     span.smallcaps{font-variant: small-caps;}
     div.columns{display: flex; gap: min(4vw, 1.5em);}
-    div.column{flex: 1;}
+    div.column{flex: auto; overflow-x: auto;}
     div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
     ul.task-list{list-style: none;}
     ul.task-list li input[type="checkbox"] {
diff --git a/test/writer.html5 b/test/writer.html5
index ad8079f75..190288769 100644
--- a/test/writer.html5
+++ b/test/writer.html5
@@ -152,7 +152,7 @@
     code{white-space: pre-wrap;}
     span.smallcaps{font-variant: small-caps;}
     div.columns{display: flex; gap: min(4vw, 1.5em);}
-    div.column{flex: 1;}
+    div.column{flex: auto; overflow-x: auto;}
     div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
     ul.task-list{list-style: none;}
     ul.task-list li input[type="checkbox"] {