Странное поведение свойства "column-count" в Chrome

Question

Я использовал счетчик столбцов, чтобы разделить текст на столбцы, и назначил отображение: inline-block; для дочерних элементов, чтобы исключить перенос текста внутри блоков. В результате при рендеринге произошло странное поведение, по какой-то причине после блока столбцов появился большой отступ. Это ошибка хрома или я что то не так делаю? Есть ли способы обойти это?

Chrome 63.0.3239.108, Linux Mint

PS: в Firefox все работает хорошо

.container {
  padding: 20px;
  max-width: 1024px;
}

.columns {
  margin: 0;
  column-count: 2;
  column-gap: 20px;
}

p {
  margin: 0 0 1em;
  line-height: 1.5;
  display: inline-block;
}

<div class="container">
  <div class="columns">
    <p>Lorem ipsum dolor amet roof party mumblecore raw denim lyft paleo ennui. Tbh PBR&B mustache, cray palo santo adaptogen sustainable iceland echo park yr kinfolk before they sold out pinterest. Salvia semiotics before they sold out, pitchfork next level vape unicorn. Pinterest poutine lumbersexual seitan bespoke, crucifix skateboard intelligentsia ramps.</p>
    <p>Small batch lo-fi celiac, chillwave fingerstache lumbersexual gochujang succulents. Pitchfork small batch cornhole plaid flannel mlkshk 8-bit blog squid trust fund keytar portland asymmetrical skateboard intelligentsia. Tumeric beard succulents art party, meggings chillwave swag hashtag gochujang coloring book direct trade leggings sriracha pok pok. Cornhole food truck schlitz, snackwave art party hot chicken microdosing kale chips disrupt church-key.</p>
    <p>Unicorn asymmetrical actually lomo whatever typewriter fixie dreamcatcher vegan pabst everyday carry. Salvia next level hella vegan williamsburg pug. Pabst DIY chartreuse disrupt occupy. Cornhole crucifix PBR&B thundercats gochujang tacos fanny pack you probably haven't heard of them chillwave normcore kitsch wayfarers dreamcatcher man bun echo park. La croix normcore cronut prism fam knausgaard roof party blog kinfolk try-hard etsy raclette ugh quinoa. PBR&B kickstarter pabst jean shorts. 90's cray vexillologist pabst.</p>
  </div>
    
  <p>Sriracha actually crucifix snackwave try-hard fam twee tilde kitsch lo-fi af. Af freegan cliche portland. Distillery pop-up whatever affogato lyft chicharrones tacos snackwave. Art party single-origin coffee iPhone palo santo fam XOXO gochujang chambray leggings venmo neutra cold-pressed direct trade whatever. Shaman post-ironic aesthetic gochujang.</p>
</div>

Answer 1

Вы можете использовать свойства CSS, такие как break-inside, чтобы указать, что контент не должен распространяться на несколько столбцов.

.container {
  padding: 20px;
  max-width: 1024px;
}

.columns {
  margin: 0 0 1em;
  column-count: 2;
  column-gap: 20px;
}

p {
  margin: 0 0 1em;
  line-height: 1.5;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside:avoid;
  -moz-page-break-inside:avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
}

<div class="container">
  <div class="columns">
    <p>Lorem ipsum dolor amet roof party mumblecore raw denim lyft paleo ennui. Tbh PBR&B mustache, cray palo santo adaptogen sustainable iceland echo park yr kinfolk before they sold out pinterest. Salvia semiotics before they sold out, pitchfork next level vape unicorn. Pinterest poutine lumbersexual seitan bespoke, crucifix skateboard intelligentsia ramps.</p>
    <p>Small batch lo-fi celiac, chillwave fingerstache lumbersexual gochujang succulents. Pitchfork small batch cornhole plaid flannel mlkshk 8-bit blog squid trust fund keytar portland asymmetrical skateboard intelligentsia. Tumeric beard succulents art party, meggings chillwave swag hashtag gochujang coloring book direct trade leggings sriracha pok pok. Cornhole food truck schlitz, snackwave art party hot chicken microdosing kale chips disrupt church-key.</p>
    <p>Unicorn asymmetrical actually lomo whatever typewriter fixie dreamcatcher vegan pabst everyday carry. Salvia next level hella vegan williamsburg pug. Pabst DIY chartreuse disrupt occupy. Cornhole crucifix PBR&B thundercats gochujang tacos fanny pack you probably haven't heard of them chillwave normcore kitsch wayfarers dreamcatcher man bun echo park. La croix normcore cronut prism fam knausgaard roof party blog kinfolk try-hard etsy raclette ugh quinoa. PBR&B kickstarter pabst jean shorts. 90's cray vexillologist pabst.</p>
  </div>
    
  <p>Sriracha actually crucifix snackwave try-hard fam twee tilde kitsch lo-fi af. Af freegan cliche portland. Distillery pop-up whatever affogato lyft chicharrones tacos snackwave. Art party single-origin coffee iPhone palo santo fam XOXO gochujang chambray leggings venmo neutra cold-pressed direct trade whatever. Shaman post-ironic aesthetic gochujang.</p>
</div>