CSS3 columns in Chrome with child DIV elements

Question

I'm having trouble with CSS3 columns, they don't work as I would have expected in Chrome 53.0.2785 - they work as I'd expect in Firefox 49, IE11, EDGE 38.14393

The first two child DIVs of my "container" DIV display under each other in Chrome, but next to each other in Firefox

HTML:

<div class="container">
  <div>
    Some content 1
  </div>
  <div>
    Some content 2
  </div>
</div>

CSS:

* {
  box-sizing: border-box;
}
.container {
  column-width: 100px;
  column-gap: 12px;
}
.container > div {
  display: inline-block;
  width: 100px;
  border: 1px solid black;
  padding: 20px;
}

Test it here: https://jsfiddle.net/s7cfbqzt/3/

Now, there's a few strange things happening in Chrome:

• if I only remove "display: inline-block", Chrome breaks up the DIVs (even the border gets distributed) - Firefox does not

  • Please note that I can't set column-count in the parent (which in combination with removing inline-block seems to kind-of-work) as it's supposed to be a fluid layout. The height of each DIV is dynamic as well, so if that's a requirement I'd have to write some JS for this (but I'd prefer to have this working without JS).

• if I remove border-sizing and all properties of the child DIVs it works as expected, but as soon as I start filling the inner DIVs with some other content (that might have border or paddings or box-shadows), it breaks again

If I add a third child DIV

<div>Some content 3</div>

there will be columns in Chrome, but is displayed as

1..3
2

A fourth DIV would then be display underneath DIV3, a fifth DIV in the first "row" again.

1..3..5
2..4

Is this a bug in Chrome or am I doing something wrong?

Answer 1

You can achieve this by floating the divs within the container, you will also need to float their container, or they won't display correctly.

* {
  box-sizing: border-box;
}
.container {
  column-width: 100px;
  column-gap: 12px;
float: left;
}
.container > div {
  display: inline-block;
  width: 100px;
  border: 1px solid black;
  padding: 20px;
float: left;
}

EDIT:

then instead of using column-gap, i would apply margin left to each of the divs inside the container. like so;

.container {
    width: 100%;
    float: left;
    }
    .container > div {
      width: 100px;
      border: 1px solid black;
      padding: 20px;
    float: left;
margin-left: 12px;
    }
.container > div:first-child {
margin-left: 0;
}

EDIT:

If the height does not need to match - remove column-width from the container div. see https://jsfiddle.net/0sz6t3ft/1/

Answer 2

Chrome is actually probably the one browser doing it correctly:

https://drafts.csswg.org/css-break/#widows-orphans

Name:   orphans, widows
Value:  <integer>
Initial:    2

IE 11, EDGE and Firefox (49) do not (yet?) support widows and orphans, even though http://caniuse.com/#feat=css-widows-orphans claims that IE11 and EDGE do support it - see https://jsfiddle.net/s7cfbqzt/13/ in IE11 and EDGE. If IE and EDGE actually would support it, they'd set the initial values to 1 instead of 2.

Fix for my use-case is to add

orphans: 1;
widows: 1;

to the container-class in CSS.

Thanks @Jay for taking the time to look into this!