CSS columns, odd offset based on height

Question

I came across a very strange behavior regarding CSS column layouts that only appears in Chrome.

Depending on the total height of the column column, the offset to the left is shifted, making it difficult to determine the actual location of the elements. The rendering looks great, but if you check the item, you can see that it is offset a lot.

Here is an example: https://jsfiddle.net/vx8h8u46/

Inspect the .panel element and you will see that the bounding box does not start on the left.

If you click on the button to delete one item, then suddenly the bounding box will be correct.

It seems that this happens when the height of the panel exceeds a certain threshold, but this is only an assumption at this stage. Is there any work around?

---

function logOffset() { document.getElementById("log").innerText = document.querySelector(".panel").getBoundingClientRect().left; } window.removeLastItem = function() { var items = document.querySelectorAll(".item"); if (items.length) { items[items.length - 1].remove(); logOffset(); } } logOffset(); 

 * { box-sizing: border-box; } .item { display: inline-block; width: 160px; height: 80px; outline: 1px solid red; } .container { -moz-column-width: 320px; column-width: 320px; -moz-column-fill: auto; column-fill: auto; max-height: 160px; width: 640px; } 

 <div class="container"> <div class="panel"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <!-- Something weird happens after this --> <div class="item">10</div> </div> </div> <div> Left offset of <mark>panel</mark>: <span id="log"></span> </div> <button onclick="removeLastItem()"> Remove last item </button> 

Answer 1

Column children must be inline, so the following code should work well:

 .panel { display: inline; /* Children of columns must be inline */ } 

And the whole fragment:

 function logOffset() { document.getElementById("log").innerText = document.querySelector(".panel").getBoundingClientRect().left; } window.removeLastItem = function() { var items = document.querySelectorAll(".item"); if (items.length) { items[items.length - 1].remove(); logOffset(); } } logOffset(); 

 * { box-sizing: border-box; } .item { display: inline-block; width: 160px; height: 80px; outline: 1px solid red; } .container { column-width: 320px; column-fill: auto; max-height: 160px; width: 640px; } .panel { display: inline; /* Children of columns must be inline */ } 

 <div class="container"> <div class="panel"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <!-- Something weird happens after this --> <div class="item">10</div> </div> </div> <div> Left offset of <mark>panel</mark>: <span id="log"></span> </div> <button onclick="removeLastItem()"> Remove last item </button> 

 function logOffset() { document.getElementById("log").innerText = document.querySelector(".panel").getBoundingClientRect().left; } window.removeLastItem = function() { var items = document.querySelectorAll(".item"); if (items.length) { items[items.length - 1].remove(); logOffset(); } } logOffset(); 

 * { box-sizing: border-box; } .item { display: inline-block; width: 160px; height: 80px; outline: 1px solid red; } .container { -moz-column-width: 320px; column-width: 320px; -moz-column-fill: auto; column-fill: auto; max-height: 160px; width: 640px; } 

 <div class="container"> <div class="panel"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <!-- Something weird happens after this --> <div class="item">10</div> </div> </div> <div> Left offset of <mark>panel</mark>: <span id="log"></span> </div> <button onclick="removeLastItem()"> Remove last item </button> 

Answer 2

User Border replaced by outline in .item Class

CSS border properties let you specify the style and border color of an element.

A path is a line that is drawn around elements (outside the borders) to make the element "stand out"

The CSS structure property is a confusing property. When you first learn about it, it is difficult to understand how it even remotely differs from the border of property. The W3C explains this as follows: differences:

1. Lines do not take up space.

2. Rows may be non-rectangular.

 .item { display: inline-block; width: 160px; height: 80px; border: 1px solid red; } 

Live Demo

Answer 3

Ease of solving a problem may be better than complicating it at times. I suggest keeping everything as it is and try and add flex. It will not only help you display in all browsers, but will also change the presentation according to the size of the browser in bootstrap, as a simple method. Try it and if it makes any unwanted answer, comment on it.

 .classname { display: flex; flex-wrap: wrap; justify-content:center; }