0

I used a column-count to split the text into columns and assigned the display: inline-block; for child elements to exclude text wrapping inside blocks. As a result, there was a strange behavior when rendering, for some reason a large indent appeared after the block of columns. Is this a bug of chrome or am I doing something wrong? Are there any ways around this?

Chrome 63.0.3239.108, Linux Mint

PS: In Firefox everything works well

.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>
Artem Sinelnikov
  • 53
  • 8

1 Answers1

1

You can use CSS properties, such as break-inside, to specify that content should not be spread over multiple columns.

.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>
James T
  • 795
  • 9
  • 11
  • This really removes the strange indentation from the bottom of the columns, but changing **display** to **block** leads to the fact that the content of paragraphs can be split into different columns. – Artem Sinelnikov Jan 26 '18 at 09:27