Question 253880 in Html Question posted in
Some basic documentation can be found here.

Html – flexbox with min-height that doesn't stretch with content

https://jsfiddle.net/u7fkjrvy/17/

I have a scrollable container with flex column.
Each children has "min-height: 100%" (I want each div to fit the height of the screen). The problem is, when the content of the children is bigger than 100%, the children will not stretch to fit the content inside. I don’t understand why because it should be just a minimum as it’s not "height" parameter ?

To summarize : I want a div with min-height:100vh to also stretch with his content

HTML and CSS

body{
  width: 100%;
  height: 100vh;
  overflow:scroll;
  margin:0;
  padding:0;
}

container{
  width: 100%;
  height: 100vh;
  overflow:scroll;
  margin:0;
  padding:0;
  display: flex;
  flex-direction: column;
}

section:nth-child(2){
  background-color: blue
}

section{
  min-height: 100vh;
  background-color: yellow;
  padding:10px
}

.content{
  height: 120vh;
  background-color:black;
  color:white
}
<container>
  <section>
    <div class="content">
    </div>
  </section>
  <section></section>
</container>

Thanks for the help !

Tags:

2

Answers


  1. 0

    Remove your min height on your section and it will work as shown here

    body{
  width: 100%;
  height: 100vh;
  overflow:scroll;
  margin:0;
  padding:0;
}

container{
  width: 100%;
  height: 100vh;
  overflow:scroll;
  margin:0;
  padding:0;
  display: flex;
  flex-direction: column;
}

section:nth-child(2){
  background-color: blue
}

section{
  background-color: yellow;
  padding:10px;
}

.content{
  height: 1200vh;
  background-color:black;
  color:white
}
    <container>
  <section>
    <div class="content">
    </div>
  </section>
  <section></section>
</container>
    Login or Signup to reply.
  2. 0

    You just need to stop the flex-items shrinking to fit in the container space.

    i.e. add flex-shrink: 0.

    body{
  width: 100%;
  height: 100vh;
  overflow:scroll;
  margin:0;
  padding:0;
}

container{
  width: 100%;
  height: 100vh;
  overflow:scroll;
  margin:0;
  padding:0;
  display: flex;
  flex-direction: column;
}

section:nth-child(2){
  background-color: blue
}

section{
  flex-shrink: 0;
  min-height: 100vh;
  background-color: yellow;
  padding:10px
}

.content{
  height: 120vh;
  background-color:black;
  color:white
}
    <container>
  <section>
    <div class="content">
    </div>
  </section>
  <section></section>
</container>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search