Pregunta Columnas CSS no equilibradas en Chrome


Quiero mostrar algunos grupos de listas de Bootstrap dinámicamente en varias columnas usando Columnas CSS, pero estoy obteniendo algunos problemas de espaciado extraño en Chrome. Firefox funciona a la perfección. Parece exactamente el problema este tipo tenía, pero nunca obtuvo una respuesta, posiblemente porque no dio un buen ejemplo. Entonces daré un buen ejemplo.

CSS (cargado después de Bootstrap):

.columns {
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
  width: 600px;
}

.list-group {
  display: inline-block;
  width:  100%;      
}

HTML:

<div class="columns">
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Aquí está en Bootply. Todo está bien en Firefox: los primeros 3 grupos de listas van en la primera columna, los 3 siguientes en el segundo. Pero en Chrome, los primeros 4 van en la primera columna, dejando la segunda columna muy corta con solo 2. ¿Cómo puedo lograr que se equilibre?

(También he observado otro problema descrito en la misma pregunta a la que me he vinculado anteriormente donde a veces Chrome creará un gran margen debajo de las columnas, pero lo dejo para una pregunta separada más adelante).


6
2018-01-29 05:41


origen


Respuestas:


Posiblemente una pregunta estúpida, pero ¿has mirado en flexbox?

.columns {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
  width: 600px;
}

.list-group {
  display: inline-block;
      width: 300px;
}

EDITAR Pasando por preguntas sin respuesta y no se dio cuenta de la edad que tiene.


1
2018-05-20 13:54