There is a simple set of inline-block divs, which are located using the css column layout .

There is a terrible problem. The child elements of divs located in all columns, starting from the second one, disappear under the following conditions:

  • The diva has an overflow: hidden property.
  • The child elements have the position property set to anything other than static .

enter image description here

These two conditions are mutually exclusive.

Tell me what am I missing? I do not even know which section of the specification to flip through.

In some browsers works. But not in chrome for desktop, chrome for android.

Demo on codepen

  • one
    I'm afraid that flipping through the specs will not help, you probably need a chrome bugtracker to flip through. In general, we go to caniuse.com , we are looking for the feature you use: caniuse.com/#feat=multicolumn , while we go off because of how little it is supported, click on the "resources" tab and there is a reference to the spec - Duck Learns to Hide
  • You're right. The most interesting thing is that it works even in the leftmost browsers. For example, on my TV: D - Georgy Yuriev
  • one
    Chromium bugtracker here: bugs.chromium.org/p/chromium/issues/… - Duck Learns to Take Cover
  • one
    As for support, it's not so scary. Only rather specific properties break-before, break-after, break-inside not supported there. Thanks, never opened this tab on caniuse .. - Georgy Yuriev
  • In general, I looked at Ie, edge, ff, chrome usual / canary and opera. On blink browsers does not work, on the rest ok. Apparently only smoke the tracker and pray that there is a crutch. - Duck Learns to Take Cover

0