CODEWITHSUNDEEP
cssflexboxcss-multicolumn-layoutcolumn-count
Sven
Sven

Reputation: 41

“display: flex” inside "column-count" renders single column in Firefox & IE

I need to have a two-column layout and two columns again inside each colunn. I used following code that renders nice on Chrome and Safari, but in single column in Firefox and IE:

What am I doing wrong? 

.two-columns {
  column-count: 2;
  dt,
  dd {
    break-inside: avoid;
    column-break-inside: avoid;
  }
}

dl.name-value {
  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;
  }
}
<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>

Edit – sry about the hyphen. Confused me, too :(

The reason why I used column-count is I don't know how many key-value pairs I'm going to get. Maybe two, maybe six, maybe eight. But I still want them to be in two columns. Here's the image of desired layout: enter image description here

Upvotes: 2

Views: 1185

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371183

The first thing I noticed was that your CSS dl.name-value selector does not match the HTML <dl class="name-value"> element. Across all browser inspectors, the CSS code just doesn't show up.

enter image description here

I checked the quotation marks, but they were fine. Sometimes quotes copied from word processors (such as MS Word) are invalid in CSS.

I checked for issues relating to SCSS, HTML Definition Lists (<dl>), CSS specificity and combinations thereof. Nothing. I also ran the code in plain CSS. Still nothing.

I checked to see if display: flex was invalid in Multi-Column Layout. But it turns out that nothing in the declaration matches. Here's an example with 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>

Well, ultimately, after stripping the selector to individual characters, it turns out that the hyphen (-) was the problem. The hyphen used in the HTML was a different character than the hyphen used in the CSS.

.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>

This may or may not solve your problem. But it's clear that using a flex container inside a multi-column box is rendered differently among major browsers. If you can post more details about the layout you want, maybe we can find a stable solution, either with column-count, flex or grid.

Upvotes: 2

Related Questions