Why is column-fill property not working?

I'm trying to create a DIV with a "2 columns" text.

So I'm using the column-xxx properties but the column-fill set with "auto" doesn't seem to behave as expected. First column should be fullfilled before the second one instead of be equally balanced.

Even the example on w3schools doesn't behave as expected.

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-fill

Here it is my html page :

<html>
<body>
  <script src="js/scripts.js"></script>
  <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>
</body>
</html>

And here it is my CSS code :

/* CSS was previously reset with meyerweb code
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
body, html {height: 100%}

body{
    background-color:Sienna;    
}

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

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

#tranche_g{
    position:relative;
    float:left;
    width: 2%;
    height: 100%;
}

#feuillet{
    position:relative;
    float: left;
    width: 87%;
    min-height: 100%;

    border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
    background-color:Bisque;

    padding-left: 1em;
    padding-right: 1em;

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

#tranche_d{
    position:relative;
    float: right;
    width: 10%;
    height: 100%;
}

Any idea why "auto" is not working properly with column-fill property ?

Solution

Set height:100% for #feuillet

body,
html {
  height: 100%
}

body {
  background-color: Sienna;
}

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

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

#tranche_g {
  position: relative;
  float: left;
  width: 2%;
  height: 100%;
}

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

#tranche_d {
  position: relative;
  float: right;
  width: 10%;
  height: 100%;
}

<html>

<body>
  <script src="js/scripts.js"></script>
  <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. </p>
        
      </div>
      <div id="tranche_d">
      </div>
    </div>
  </div>
</body>

</html>