Display flex height is 100% without scrollbar but not 100% with scrollbar

Question

On the following fiddle, my red block fill 100% of document height

https://jsfiddle.net/37xk1dvy/1/

But if add more text to trigger a scroll bar, the red block won't fill on scrolled content part.

https://jsfiddle.net/37xk1dvy/

html, body {
    background-color: #f5f5f5;
    font-size: 14px;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

body {
    overflow-y: auto;
}


#container {
    display: flex;
    flex-direction:column;
    width: 100px;
    height: 100%;

}


#container .content {
    display: flex;
    flex-direction:column;
    position: relative;
    width: 100%;
    height: 100%;
    background-color:red;
}


#container .content .wrapper {
    display: block;
    position: relative;
    margin: 0 auto;
}

<div id="container">
    <div class="content">
         <div class="wrapper">
      test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
   
        </div>
    </div>
</div>

I tried to remove height:100% as some others posts suggest, but if i do that, the issue will just be in the other way.

Answer 1

You can change height:100% to min-height:100%