The container is not set to 100% height. it's not tall enough. After you set the container to be height: 100%, you also have to set the flex-basis for each flex item. The bottom can be flex: 1 1 auto, but the top should be flex: 0 1 auto
body,html {
height:100%;
width:100%;
margin: 0;
}
#container {
width:100%;
height: 100%;
background:grey;
display:flex;
flex-direction:column;
}
.top {
background:red;
flex:1 1 auto;
padding:20px;
}
.bottom {
background:yellow;
flex:0 1 auto;
padding:20px;
}
Top Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis, arcu vitae sollicitudin pellentesque, quam libero imperdiet urna, eu rhoncus lorem dolor sed neque. Donec ex risus, pretium ut maximus fringilla, euismod id mi. Phasellus ligula sem, iaculis ut urna eget, efficitur vulputate sem.
