How to fix Chrome bug with CSS column-count?

user_7804608 0
Viewed 1192

It there any solution for column-count in Chrome?

In Firefox it works: enter image description here

In Chrome not: enter image description here

Codepen: https://codepen.io/online123/pen/qBbErZg

The .box will have different height (depends on text, images inside). .box width is and should stay static (320px). When I use display:block; for .box then margin disaper and the boxes are splited in many columns (break-inside:avoid; don't helps). column-count changes depend on screen width.

.content {
 min-height:100%;
    margin-top:100px;
}

.main {
 width:70%;
 margin:auto;
 padding-top:60px;
 padding-bottom:10px;
}

.under {
 width:70%;
 margin:auto;
 text-align:center;
 overflow:auto; 
    justify-content:center;
 position:relative;
 column-count:5;
 -moz-column-count:5;
    -webkit-column-count:5;
 -webkit-column-fill:balance;
 -moz-column-fill:balance;
 column-fill:balance;
}


.box {
 text-align:center;
 width:320px;
 padding:10px;
 margin:10px;
 display:inline-block;
 border: 1px solid white;
 background-color:#363636;
 position:relative;
 -webkit-column-break-inside:avoid;
 page-break-inside:avoid;
 break-inside:avoid;
    -moz-column-break-inside:avoid;
    column-break-inside:avoid;
}

@media screen and (max-width: 2450px) {
  .under {
   column-count: 4;
   -moz-column-count:4;
   -webkit-column-count:4;
  }
}

@media screen and (max-width: 1900px) {
  .under {
   column-count: 3;
   -moz-column-count:3;
   -webkit-column-count:3;
  }
}

@media screen and (max-width: 1400px) {
  .under {
   column-count: 2;
   -moz-column-count:2;
   -webkit-column-count:2;
  }
}

@media screen and (max-width: 950px) {
  .under {
   column-count: 1;
   -moz-column-count:1;
   -webkit-column-count:1;
  }
}

@media screen and (max-width: 700px) {
 .main {
  width:95%;
  }
 .under {
  width:95%;
  }
}

.h80 {
  height:80px;
}

.h150 {
  height:150px;
}

.h300 {
  height:300px;
}

.h500 {
  height:500px;
}

.h1000 {
  height:1000px;
}

* {
 margin:0;
 padding:0;
 box-sizing:border-box;
  background-color:black;
}
<div class="content">
<div class="under">
  <div class="box h80"></div>
  <div class="box h80"></div>
  <div class="box h80"></div>
  <div class="box h80"></div>
  <div class="box h300"></div>
  <div class="box h80"></div>
  <div class="box h80"></div>
  <div class="box h500"></div>
  <div class="box h300"></div>
  <div class="box h80"></div>
  <div class="box h300"></div>
</div>
</div>

css-multicolumn-layout google-chrome css html
1 Answers

This is not a good solution, but you can specify styles only for chrome and specify that .box is display: grid and this will fix the bug, and leave display: inline-box for firefox, but I highly recommend checking it on other browsers. And you can't use display: grid for firefox, because literally in the previous version it didn't work correctly. And to sum up it is better to use a different mechanism especially if it should work for the menu there will be problems with cls.

To specify styles only for the cast, you can use this patent _: lang (x) :: - internal-media-controls-overlay-cast-button

user_146057190
Related