Upon initial inspection, I immediately noticed that your CSS dl.name-value selector was not aligning with the HTML <dl class="name-value"> element. This discrepancy in styling was consistent across various browser inspectors, where the CSS code failed to display.
https://i.sstatic.net/SxWhA.png
After checking for any issues with quotation marks and verifying their correctness, I explored potential problems stemming from SCSS, HTML Definition Lists (<dl>), CSS specificity, and combinations thereof. However, no conclusive findings emerged, even when running the code without SCSS implementation.
I also investigated whether there could be compatibility concerns between using display: flex within a Multi-Column Layout. Yet, it became evident that none of the declarations were matching up. For instance, discrepancies arose when applying background-color:
.two-columns {
column-count: 2;
}
dl.name-value {
background-color: green;
height: 500px;
/* display: flex;
flex-wrap: wrap;
justify-content: space-between; */
}
dt {
padding-right: 0.5rem;
width: 40%;
text-align: right;
}
dd {
width: 60%;
margin-left: auto;
}
dt,
dd {
break-inside: avoid;
column-break-inside: avoid;
}
<div class="two-columns">
<dl class="name–value">
<dt>Milkman</dt>
<dd>A man with a milk</dd>
<dt>Postman</dt>
<dd>A man with a post</dd>
<dt>Manila</dt>
<dd>A man with ila</dd>
<dt>Layman</dt>
<dd>A husband</dd>
</dl>
</div>
Further analysis revealed that the culprit causing the issue was the hyphen (-). The hyphen utilized in the HTML differed from the one employed in the CSS file once scrutinized at each character level.
.two-columns {
column-count: 2;
}
dl.name-value { /* hyphen (keyboard minus sign) now matches HTML class value */
background-color: green;
height: 500px;
/* display: flex;
flex-wrap: wrap;
justify-content: space-between; */
}
dt {
padding-right: 0.5rem;
width: 40%;
text-align: right;
}
dd {
width: 60%;
margin-left: auto;
}
dt,
dd {
break-inside: avoid;
column-break-inside: avoid;
}
<div class="two-columns">
<dl class="name-value"><!-- hyphen (keyboard minus sign) now matches CSS selector -->
<dt>Milkman</dt>
<dd>A man with a milk</dd>
<dt>Postman</dt>
<dd>A man with a post</dd>
<dt>Manila</dt>
<dd>A man with ila</dd>
<dt>Layman</dt>
<dd>A husband</dd>
</dl>
</div>
While this adjustment may provide a resolution, it underlines the varying rendering outputs observed across major browsers when employing a flex container within a multi-column box. To explore more tailored solutions, sharing additional details about your desired layout will assist in determining whether utilizing column-count, flex, or grid layouts is ideal.