Finally get rid of the "overflow: auto" property of ".Bl-tag > dd"

which has long been know to cause ugly and pointless scroll bars.

Matthew Martin <phy1729 at gmail dot com>
helpfully explained the following two points to me:
1. What we need to do here is establish a new block formatting
context such that the first line of the <dd> content moves down
rather than to the right if the preceding <dt> is wide.
2. A comprehensive list of methods
to establish block formatting context is available in:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

In that list, i found that "column-count: 1" does the job.
It is part of CSS Multi-column Layout Level 1.
While that is still in Working Draft status according to
https://www.w3.org/Style/CSS/current-work ,
it is fully supported by all browsers according to
https://developer.mozilla.org/en-US/docs/Web/CSS/column-count ,
probably because it was already part of the second draft of this
standard almost 20 years ago: WD-css3-multicol-20010118.

1 files changed, 2 insertions, 2 deletions

diff --git a/mandoc.css b/mandoc.css
index d878b1fd..ab886c76 100644
--- a/mandoc.css
+++ b/mandoc.css
@@ -135,12 +135,12 @@ h2.Ss {		margin-top: 1.2em;
 		vertical-align: top; }
 .Bl-tag > dd {
 		clear: right;
+		column-count: 1;  /* Force block formatting context. */
 		width: 100%;
 		margin-top: 0em;
 		margin-left: 0em;
 		margin-bottom: 0.6em;
-		vertical-align: top;
-		overflow: auto; }
+		vertical-align: top; }
 .Bl-compact {	margin-top: 0em; }
 .Bl-compact > dd {
 		margin-bottom: 0em; }