'Chrome adds an extra space to its container when using column-count

The problem is, in chrome extra space is added between the bottom of the lowest blue box and the bottom of the container. so far a found no way to fix this. works fine in Firefox.

.outer {
    -webkit-column-count: 3;
    margin: 0;
    padding: 0;
    background:orange;
    border:1px solid black;
}

.outer div {
    -webkit-column-break-inside:avoid;
    margin: 0;
    padding: 0;
    background:lightblue;
    border:1px solid black;
}
<!DOCTYPE html>

<html>
<body>

<div class="outer">

    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  </div>

    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  </div>

     <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.<br>test<br> </div>
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

</div>

</body>
</html>

Any ideas?

https://jsfiddle.net/t8nkpkm7/

htmlcssgoogle-chromemultiple-columnscolumn-count


Solution 1:[1]

This seems related to https://code.google.com/p/chromium/issues/detail?id=297782

I don't see a CSS solution to this, but I've come up with a JavaScript solution:

var outer= document.querySelectorAll('.outer > div'),
    btm= 0;

[].forEach.call(outer, function(obj) {
  btm= Math.max(btm, obj.offsetTop + obj.offsetHeight);
});

document.querySelector('.outer').style.height= btm + 'px';

This iterates through all of .outer's children divs to determine the lowest coordinate, which is used to set the height of .outer.

Working Fiddle

Solution 2:[2]

I've been working around this for the last two days and I might have found the solution for this issue (at least in Chrome, where I have noticed the problem):

I try to emulate a sort of "Pinterest" style for the products page in my business web site by working with columns and adding a box-shadow to the div that wraps the info of each product. When I did this, I realized that the div with the greater height missed the shadow in the bottom portion of it (css overflow: hidden; maybe?).

Searching here, I found that adding an outer container with a border: 5px solid transparent; which wraps the div with the missing shadow will create a sort of "safe zone" where the shadow can be correctly shown. This tip "as-is" didn't solve the problem, but with a little tweaking in the CSS attribute brake-inside: avoid; of that wrap, and with no border at all, the shadow was correctly shown. As a side effect, when I make this modification to each product div, the extra space below the last one disappears!!! I didn't do any more testing regarding this solution as this just works for me. Therefore, anyone who wants to improve this method is welcome to. Here is a sample of the code:

HTML

<div class="card-container">
<!--Card starting point-->
<div class="safe-area">
    <div class="floating-card">
        <div class="floating-card-header card-item-4"></div>
        <div class="floating-card-body">
            <div class="floating-card-title">
                <h3>Title</h3>
            </div>
            <div class="floating-card-content">
                <p class="smaller">Content Text</p>
            </div>
        </div>
        <div class="floating-card-footer">
            <div class="thin-line"></div>
            <a href="" class="btn btn-info">Action</a>
        </div>
    </div>
</div>
<!--Card ending point-->
</div>

CSS

.card-container{
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    -o-column-gap: 20px;
    column-gap: 20px;
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    -moz-page-break-inside: avoid; /* Firefox */
    break-inside: avoid; /* IE 10+ */
 }

.floating-card{
    margin-bottom: 20px;
    border-width: 0px;
    border-style: solid;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0px 3px 4px #aaa;
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    -moz-page-break-inside: avoid; /* Firefox */
    break-inside: avoid; /* IE 10+ */
}

.safe-area{
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    -moz-page-break-inside: avoid; /* Firefox */
    break-inside: avoid; /* IE 10+ */
}

.floating-card p.smaller{
    font-size: medium !important;
}

.floating-card-header{
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px 5px 0 0;
    height: 25vh;
}

.floating-card-body, .floating-card-footer{
    margin: 0px 10px;
}

.floating-card-title h3{
    font-weight: bold;
}

.floating-card-footer > a{
    margin: 3% 25%;
    width: 50%;
}

Solution 3:[3]

Not an elegant solution, but adding an empty paragraph to the end of the two-column div solved this problem for me.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rick Hitchcock
Solution 2
Solution 3 szanyi

Related Questions