Thierry's response offers a solution to rectify an issue, but inadvertently addresses the core problem you're encountering and incorrectly attributes blame to the wrong browser. Let's delve deeper into this:
To clarify, the functionality is actually correct in Firefox but erroneous in Chrome.
The scenario involves a div serving as a multi-column container, triggered by using columns: 2. This CSS property is essentially shorthand for the following:
div {
column-count: 2;
column-width: auto;
}
A multi-column container creates a new block formatting context, causing descendant elements' properties to be applied relative to the div rather than the webpage in this instance.
It's important to note that multi-column layouts possess a certain level of flexibility; they attempt to adhere to specified values while adjusting the columns if necessary to accommodate content or reduce them if there's extra space available. An example highlighting this behavior will be discussed later on in my explanation.
Within the div, you have an unordered list typically displaying items vertically. However, due to the previous application of columns: 2, the <ul> splits automatically into two columns to best fit the layout. Since no height or width properties are declared anywhere, the split occurs evenly resulting in a visual misalignment between both halves of the list due to default margin-top pushing down the first set of list items by 16px (the standard margin size for <ul>).
The reason why implementing columns: 2 within ul {} instead of div {} resolves your issue is because it segregates the <ul> itself into two columns instead of trying to force-fit a normal <ul> into a multi-column container. This adjustment ensures consistent formatting at the start of each column.
A default <div> dynamically expands based on its container's width and content height. Adding more items to the <ul> causes both sets of list items to grow in height accordingly, especially visible with a background-color set for the div.
In terms of flexibility, limiting the div's height to 150px results in the columns expanding beyond the div's bounds to accommodate all list items:
div {
columns:2;
column-rule: thin solid red;
height: 150px;
background: grey;
}
ul.overflow {
overflow: hidden;
}
<div>
<ul>
<li>Lorem ipsum dolor.</li>
<li>Consequuntur, ab nostrum.</li>
<li>Quibusdam, iure, fuga.</li>
<li>Suscipit quisquam, vel.</li>
<li>Assumenda architecto, adipisci!</li>
<li>Molestias, nostrum ratione.</li>
<li>Quaerat, eveniet, in.</li>
<li>Illum, debitis, dicta.</li>
<li>Tempore, placeat, ea.</li>
<li>Amet dignissimos, maiores.</li>
<li>Odio, eos, ullam.</li>
<li>Modi libero, quis!</li>
<li>Aliquid, commodi, voluptates.</li>
<li>Aperiam, magni, vel.</li>
<li>Vitae, minima dolorum!</li>
<li>Quidem, corporis, dolorum.</li>
<li>Autem, minima, sit.</li>
<li>Adipisci, odio, numquam.</li>
<li>At, dicta, hic!</li>
<li>Odit, blanditiis voluptate.</li>
</ul>
</div>
This demonstration showcases the div auto-adjusting to container size and splitting into three columns as required by the number of list items present. The secret behind the toggle button's effect lies in the use of overflow: hidden;.
When overflow: hidden; is applied to an element, it generates a new block formatting context similar to declaring "reset my layout computation from scratch here; don't factor in what the containing block was doing." In the provided case, it instructs to ignore the CSS column layout from the preceding block formatting context and display the <ul> normally. Although Chrome fails to implement this feature correctly, it should ideally comply. Such discrepancies often result from flawed/incomplete implementations or decisions made by Chrome developers catering to perceived user preferences.
Furthermore, Thierry’s recommendation to resolve the uneven vertical alignment of the two segments in the <ul> involved applying column properties directly to the <ul>. While this specific objective could also be achieved by removing the margin-top property or setting it to zero, adopting this method accomplishes additional tasks:
- Evaluating proper multi-column layout configurations for the
<ul>, ensuring that the browser handles the list and its items appropriately within a multi-column layout context instead of forcing them into a multi-column container.
- Implementing the
columns property on the <ul> maintains consistency when creating a new block formatting context via overflow: hidden;, preserving the applied multi-column layout within the fresh block context established.
This revised approach ultimately aligns with your intentions, especially if the goal solely revolves around dividing an unordered list into multiple columns. If the aim encompasses various element types or multiple elements necessitating consideration for a multi-column layout, retaining the property on the parent <div> remains imperative.