Why is column-fill property not working as expected with "auto"?

Question

I created an html page with a "2 columns" style with column-fill property set with "auto". So, the first column should be fullfilled before the second one instead of be equally balanced (when "column-fill = auto"). The code is not behaving as expected :

HTML code :

<html>
<body>
    <div id="wrapper">
        <div class="livre">
            <div class="cahier">
                <div id="tranche_g">
                </div>
                <div id ="feuillet">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum posuere orci nec imperdiet. Etiam erat sem, mollis non leo a, tincidunt posuere sapien. Cras fringilla venenatis aliquam. In euismod aliquet mi tincidunt condimentum. Donec metus lorem, tincidunt nec aliquet id, iaculis a elit. Fusce lectus justo, eleifend ut elit et, interdum finibus nisl. Mauris id enim porta, vulputate lectus a, sagittis eros. Curabitur in aliquam tortor. Sed a maximus est. Suspendisse enim massa, scelerisque vitae sagittis non, consectetur et velit. Vivamus placerat ligula a tortor efficitur mattis. Fusce eu arcu a metus rhoncus pretium in id elit. Nunc condimentum eleifend neque non vulputate. Integer varius scelerisque aliquam.</p>
                </div>
                <div id="tranche_d">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS code :

body, html {height: 100%}

body{
    background-color:Sienna;    
}

#wrapper{
    margin: auto;
    position:relative;
    max-width: 1000px;
    height: 100%;
    top: 0px;
    bottom: 0px;
}

.livre{
    background-color: SaddleBrown;
    border-left: 2px solid black;
    border-right: 2px solid black;
    position:relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    display: flex;
}

.cahier{
    background-color: NavajoWhite;
    margin-left: 4%;
    margin-right: 4%;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
    position: relative;
    box-sizing: border-box;
    width: 92%;
    min-height: 100%;
    display: flex;
}

#tranche_g{
    width: 2%;
    min-height: 100%;
}

#feuillet{
    background-color: Bisque;
    border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    box-sizing: border-box;
    width: 87%;
    min-height: 100%;
    padding-left: 1em;
    padding-right: 1em;

    /* Chrome, Safari, Opera */
    -webkit-column-count: 2; 
    -webkit-column-gap: 2em;
    -webkit-column-rule: 1px solid;
    -webkit-column-fill: auto;
    /* Firefox */
    -moz-column-count: 2;
    -moz-column-gap: 2em;
    -moz-column-rule: 1px solid;
    -moz-column-fill: auto;
    /* Standard */
    column-count: 2;
    column-gap: 2em;   
    column-rule: 1px solid;     
    column-fill: auto;
}

#tranche_d{
    width: 10%;
    min-height: 100%;
}

The weird thing is that if I remove the "wrapper" (last parent) div, and modify the "livre" div as below, it works :

.livre{
    background-color: SaddleBrown;
    border-left: 2px solid black;
    border-right: 2px solid black;
    position:relative;
    box-sizing: border-box;
    max-width: 1000px;
    margin: auto;
    height: 100%;
    top: 0px;
    bottom: 0px;
}

With this code, column-fill = auto do work as expected : The first column is fullfilled before the second.

So the question is why is it not working with the "wrapper" div, and what should I do to make it works ?

One could argue to use the working code, but it doesn't make fill the "livre" div on the remaining bottom of page when there is a scrollbar (on very short browser window size). That is the reason of creating the "wrapper" div, but on top of all I'd like to understand the reason why column-fill = auto is not working.

Asons · Accepted Answer · 2017-07-29T09:59:23.337

The main problem here is the min-height: 100%, and can be a pain to make work.

This SO-post, css-height-working-but-min-height-doesnt-work, shed some light on it and have a general suggestion on how to deal with percent based heights.

A more modern approach is to use viewport units instead. With that you can set the min-height: 100vh on a specific element and it will work like a charm, and you avoid the having to set a height on every element, which often cause other unwanted issues.

Here is an updated/cleaned up version of yours, where I remove all min-height: 100%/height: 100%, the wrapper element and gave .cahier a min-height: 100vh

Updated codepen

Stack snippet

body {
  background-color: Sienna;
}

.livre {
  background-color: SaddleBrown;
  border-left: 2px solid black;
  border-right: 2px solid black;
  position: relative;
}

.cahier {
  background-color: NavajoWhite;
  margin-left: 4%;
  margin-right: 4%;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  position: relative;
  min-height: 100vh;                      /*  added property  */
  display: flex;
}

#tranche_g {
  width: 2%;
}

#feuillet {
  background-color: Bisque;
  border-left: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
  box-sizing: border-box;
  width: 87%;
  padding-left: 1em;
  padding-right: 1em;
  /* Chrome, Safari, Opera */
  -webkit-column-count: 2;
  -webkit-column-gap: 2em;
  -webkit-column-rule: 1px solid;
  -webkit-column-fill: auto;
  /* Firefox */
  -moz-column-count: 2;
  -moz-column-gap: 2em;
  -moz-column-rule: 1px solid;
  -moz-column-fill: auto;
  /* Standard */
  column-count: 2;
  column-gap: 2em;
  column-rule: 1px solid;
  column-fill: auto;
}

#tranche_d {
  width: 10%;
}

<div class="livre">
  <div class="cahier">
    <div id="tranche_g">
    </div>
    <div id="feuillet">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum posuere orci nec imperdiet. Etiam erat sem, mollis non leo a, tincidunt posuere sapien. Cras fringilla venenatis aliquam. In euismod aliquet mi tincidunt condimentum. Donec metus
        lorem, tincidunt nec aliquet id, iaculis a elit. Fusce lectus justo, eleifend ut elit et, interdum finibus nisl. Mauris id enim porta, vulputate lectus a, sagittis eros. Curabitur in aliquam tortor. Sed a maximus est. Suspendisse enim massa, scelerisque
        vitae sagittis non, consectetur et velit. Vivamus placerat ligula a tortor efficitur mattis. Fusce eu arcu a metus rhoncus pretium in id elit. Nunc condimentum eleifend neque non vulputate. Integer varius scelerisque aliquam.</p>
    </div>
    <div id="tranche_d">
    </div>
  </div>
</div>

Thanks ! I appreciate this experience exchange. I applied your solution to my code including the wrapper and it works perfect ! https://codepen.io/Jacknight/pen/brEdyj . I thought vh units were related to screen not to window size, so I 'm surprised that min-height: 100vh don't create a scrollbar if the window is a bit smaller than screen (but big enough for the text). If you know any good tutorial about vh and viewport, it's welcomed. — Douglas, Jul 29 '17 at 10:27
@Douglas Check these out: https://css-tricks.com/fun-viewport-units/ ... https://css-tricks.com/viewport-sized-typography/ — Asons, Jul 29 '17 at 10:53

Why is column-fill property not working as expected with "auto"?

1 Answers1