Chrome Columns Bug When Number of Columns Is Less Then Column-Count

Chrome columns bug when number of columns is less then column-count

Based on how your markup looks like, the break-inside: avoid-column; should fix that, together with usingdisplay: block instead of display: inline-block (and you can drop width: 100%)

.outer {  -webkit-column-count: 3;  -moz-column-count: 3;  column-count: 3;  -webkit-column-gap: 30px;  -moz-column-gap: 30px;  column-gap: 30px;}
.inner {  position: relative;  display: block;  margin-bottom: 40px;  line-height: 1.3;  break-inside: avoid-column;}
.inner:nth-child(even) {  background: lightgray;}

<div class="outer">  <div class="inner">    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  </div>  <div class="inner">    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  </div></div>

Column-count issue in chrome

The column rule break the element to adjust the height. In your case it happened. Fortunately, you can tell the browser to keep specific elements together with break-inside: avoid;.

At the moment, the property universally accepts the values auto and avoid.
Use avoid on an element within a multi-column layout to keep the property from breaking apart.

.grid-item { 
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

column-count not splitting on short columns in Chrome

In this case, I would simply change the HTML structure to wrap label/input inside divs:

.aoi {  column-count: 2;  padding: 1em 1em 1em 2em;}

<div class="aoi types-of-communication">  <div>    <input name="option_19807" id="option_19807" type="checkbox" class="bfsubs_option" checked="" data-sub-id="19807">    <label class="bfsubs_option_label" for="option_19807">Event Invitations</label>  </div>  <div>    <input name="option_20000" id="option_20000" type="checkbox" class="bfsubs_option" data-sub-id="20000">    <label class="bfsubs_option_label" for="option_20000">Insights</label>  </div></div>

chrome and safari render css columns differently when number of items equals number of columns

I sorted this out, at least for Safari vs. Chrome.

Since this only applies when the number of items is equal to the number of columns, and since that number is known, I can apply display: inline-block; to li and then override that when the 2nd listing is also the last listing.

In my case, the solution is to add to the CSS:

li {
  display: inline-block; 
}

li:last-child:nth-child(2) {
  display: block;
}

Full CSS:

ul {
  moz-column-count:2;
  -webkit-column-count:2;
  column-count:2;
  column-gap: 2em;
}

li {
  display: inline-block;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  width:100%;
  list-style-type:none;
  padding: 1em;
  box-sizing:border-box;
  background-color: #90cdc0;
  margin-bottom: 2em;
}

li:last-child:nth-child(2) {
  display: block;
}

CSS column-count not respected

In your example (jsfiddle), there are 5 elements of equal size to be distributed into 4 columns. Since they won't fit next to each other (they are more than 4) , the first column will contain 2 elements. That defines the height of the container, so the second column will also get 2 elements, and so there's one remaining for the third column and none for the fourth column. There are four columns, but the fourth one is simply empty...

In other words: The height of the container is determined by the minimum height which is needed to fit all elements into the number of columns. Once that is done, the content will be filled into the columns starting from the left, and each column will get as much content as fits into it.

CSS column-count and Chrome bug: how to avoid overflow content being cropped

I'm not sure how you are styling your .onsale so I styled on my own way.

If you use position:relative in .pin and then position:absolute you can achieve what you want.

UPDATE: The issue is the webkit-column-count:1 in Chrome and since having that with 1 or nothing is the same, just remove it and use another technique that will allow you to have the .onsale out of flow by using position:absolute

#columns {   border: 1px solid red;  }.pin {  width: 100%;  display: inline-block;  padding: 10px;  margin-bottom: 5px;  position: relative}.onsale {   min-height: 3.236em;    min-width: 3.236em;    padding: .202em;    font-size: 1em;    font-weight: 700;    position: absolute;    text-align: center;    line-height: 3.236;    top: -.5em;    left: -.5em;    margin: 0;    border-radius: 100%;    background-color: lightgreen;    color: white;    font-size: .857em;    -webkit-font-smoothing: antialiased;}

<div id="columns">  <div class="pin">    <a href="#">      <span class="onsale">Sale!</span>      <img src="//placehold.it/300x300" />    </a>    <h3>Product 1</h3>  </div>  <div class="pin">    <a href="#">      <span class="onsale">Sale!</span>      <img src="//placehold.it/300x300" />    </a>    <h3>Product 2</h3>  </div></div>

CSS columns styling only works on one column in Chrome

Someone mentioned here that they managed to fix this by adding transform: translateZ(0) to the grid item to enable hardware acceleration, in this case:

.grid-cell-container {
  transform: translateZ(0)
}

Chrome broke my CSS/HTML with Version 102.0.5005.61

Can confirm that the latest Chrome version broke this.

_{(102.0.5005.61)}

---

It's caused by the summary-image-wrapper being a display: block.

Apply the following CSS rule to change it to display: inline-block to fix the issue:

.summary-image-wrapper[data-v-08ab2d5a] {
    padding-top: 100%;
    position: relative;
    width: 100%;
    background: red;
    display: inline-block;
}

* {box-sizing: border-box; }
.small-container[data-v-08ab2d5a] {max-width: 800px; margin: 0 auto; }
.article[data-v-08ab2d5a] {-moz-column-count: 2; column-count: 2; grid-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; }
.article .text-row__column[data-v-08ab2d5a] {padding: 10px 0; flex: 0 0 50%; order: 0!important; font-family: Inter; font-size: 16px; font-weight: 400; font-stretch: normal; font-style: normal; letter-spacing: -.16px; text-align: left; color: #1d1f27; line-height: 24px; } [data-v-08ab2d5a] .style-success-story-quote {font-family: Inter; font-size: 22px; font-weight: 700; font-stretch: normal; font-style: normal; line-height: 1.14; letter-spacing: -.63px; color: #f4a331; padding-top: 30px; }
.summary-image-outer[data-v-08ab2d5a] {padding: 0 50px; margin-top: 0; width: 100%; }

.summary-image-wrapper[data-v-08ab2d5a] {
    padding-top: 100%;
    position: relative;
    width: 100%;
    background: red;
    display: inline-block;
}

.summary-image-wrapper .summary-image[data-v-08ab2d5a] {position: absolute; top: 0; height: 100%; width: 100%; background-size: cover; background-position: 50%; border-radius: 50%; background-color: green; }

<div class="small-container" data-v-08ab2d5a=""><article class="article" data-v-08ab2d5a=""><div class="text-row__column" data-v-08ab2d5a=""><div data-v-08ab2d5a=""><strong class="text-row__title" data-v-08ab2d5a=""> A fertile environment for talent to grow </strong> <p class="style-default" data-v-08ab2d5a="">When asked, team members nearly always say the best thing about working at Xxxx Xxxxx is the people. Not only do they form strong relationships, but they appreciate each other’s talents and the opportunity to learn from one another. As Xxxxxxx (Training Specialist) says; <br></p></div></div><div class="text-row__column" data-v-08ab2d5a=""><div data-v-08ab2d5a=""><!----> <p class="style-success-story-quote" data-v-08ab2d5a="">“It’s really inspiring to work with talented people.”</p></div></div><div class="text-row__column" data-v-08ab2d5a=""><div class="summary-image-outer" data-v-08ab2d5a=""><div class="summary-image-wrapper" data-v-08ab2d5a=""><div class="summary-image" style="" data-v-08ab2d5a=""></div></div></div></div><div class="text-row__column" data-v-08ab2d5a=""><div data-v-08ab2d5a=""><!----> <p class="style-default" data-v-08ab2d5a="">A close second is the opportunity to learn and grow within the organisation. Xxxxx (Data and Insights Manager) commented that, “at Xxxx Xxxxx you keep growing...working here broadens your mind and you start to think differently.” This also seems to be one of the reasons that people choose to work for Xxxx Xxxxx with Xxxxx (Product Designer), one of our newest team members, saying he was attracted to the “very fertile environment in terms of learning and developing.”<br><br>One of the other reasons people choose to work at Xxxx Xxxxx is their experience through the recruitment process. Through my own process of joining the company, I got the sense that the people I came into contact with were very genuine and very real. Overall it seemed like people really care about the company, the people and the products they co-create.<br><br>My first impression seems to be an accurate reflection of how other team members feel, as they frequently mention how emotionally invested they are in their work, their team and the success of the business. There is a culture of care and a sense that everybody feels they are part of something bigger than themselves. Now that I have been in the team for a few months, I have a feeling people take their work seriously but they don’t take themselves too seriously. There isn’t anyone with a big ego and the culture is team-oriented.</p></div></div><div class="text-row__column" data-v-08ab2d5a=""><div data-v-08ab2d5a=""><!----> <p class="style-success-story-quote" data-v-08ab2d5a="">“I have a feeling people take their work seriously but they don’t take themselves too seriously.”<br></p></div></div></article></div>

Is there a solution for CSS column breaks that works in both Firefox and Chrome

You could use flexbox to keep the children of .three_col in a single row like this:

.three_col {  display: flex;}.keep_together {  margin: 20px;  flex: 1;}

<div class="three_col"><div class="keep_together"><h2 style="color: #02b4f0;">Location 1</h2><p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p><p>Email:</p><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p></div><div class="keep_together"><h2 style="color: #62bb47;">Location 2</h2><p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p><p>Email:</p><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr </p></div><div class="keep_together"><h2 style="color: #ef3781;">Location 3</h2><p>10 Something Street <br>Somewhere 999<br>tel: 03 9999 9997<br>fax: 03 9999 9998</p><p>Email:</p><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p></div></div>

---

Related Topics