I've discovered some signifiant differences in browser behavior when combining column-count with column-width and break-before.
The following displays as 3 columns in Safari, 2 columns in Chrome, and 1 column in Firefox. The columns are each the browser width, and not 3.75in, so right scrolling becomes necessary to see them.
column-count: 1 is set just to highlight the issue. Goal is for it to be column-count: 2, and then responsively degrade to 1 column for narrow browsers (i.e. less than 7.5in). That is why the break-before: column is there, as I want DIV 3 to always start on a new column, when it's wide enough to show 2 columns. I know the break-before: column is not needed for DIV 1, but left it in to highlight the issue.
<html>
<body>
<div style="column-count: 1; column-width: 3.75in;">
<div>
<div style="break-before: column;">
<div>DIV 1</div>
</div>
<div style="break-inside:avoid; ">Div 1 Div 1 Div 1 Div 1 Div 1 Div 1 Div 1 Div 1 Div 1 Div 1 Div 1 Div 1 </div>
</div>
<div style="break-inside:avoid;">
<div>DIV 2</div>
<div style="break-inside:avoid; ">Div 2 Div 2 Div 2 Div 2 Div 2 Div 2 Div 2 Div 2 Div 2 Div 2 Div 2 Div 2 </div>
</div>
<div style="break-inside:avoid;">
<div style="break-before: column;">
<div>DIV 3</div>
</div>
<div style="break-inside:avoid; ">Div 3 Div 3 Div 3 Div 3 Div 3 Div 3 Div 3 Div 3 Div 3 Div 3 Div 3 Div 3 </div>
</div>
</div>
</body>
</html>
Firefox has the behavior I'm expecting, for them to all be displayed as 1 column. Any insight into why Chrome is different and Safari is even more different?