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

Html – Auto scroll inside a flex parent with full height parent

I have the following layout, everything is full height but the columns (.col) are fluid, and I don’t want them to exceed the parent height (which is 100%).

Is there any way to add scrolling and (auto max-height) to the article element inside the container?

In short, I want the column to be full height and the article to become scrollable if his height is bigger than .col height.

Thank you!

Code:
https://jsbin.com/suqitirute/edit?html,css,output

Tags:

3

Answers


  1. 0

    Just set the height to auto for wrap div element. If you set it to 100% it means that the component would have 100% height of its parent. And in your case, the parent is the window.

    Setting it to auto means it will have the height of its children.

    .wrap {
  width: 100%;
  height: auto;
  border: 10px solid blue;
  display: flex; flex-direction: column;
}
    Login or Signup to reply.
  2. 0

    Try using height:auto in the .wrap class like this:

      
* {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin:0;
  height: 100%;
}

.wrap {
  width: 100%;
  height: auto;
  border: 10px solid blue;
  display: flex; flex-direction: column;
}

.container {
  width: 100%;
  height: 100%;
  border: 10px solid green;
  display: flex; flex-direction: column; flex: 1;
}

.content {
  padding-top: 64px;
  display: flex; flex-direction: column; flex: 1;  
}

.columns {
  border: 10px solid red;
  display: flex; flex: 1;  
}

.col {
  width: 33.3333%;
  font-family: monospace;
  display: flex;
  height: 100%;
  flex-direction: column;
  border: 10px solid black;
}

article {
  flex: 1 1 auto;
  overflow-y: scroll;
}
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div class="wrap">
    <div class="container">
      <div class="content">
        <div class="columns">
          <div class="col">
           <div class="b">
               <header>header</header>
             <article>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>               
             </article>
             <footer>footer</footer>   
           </div>         
          </div>
          <div class="col">#2</div>
          <div class="col">#3</div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>
    Login or Signup to reply.
  3. 0

    You can calculate all the other content height and subtract it from the total viewport height and assign it to the article height.

    article {
  height: calc(100vh - 174px);
  /* Borders(40*2 = 80) + Padding(64) + header(15) + footer(15) = 174px total */
}

    * {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin:0;
  height: 100%;
}

.wrap {
  width: 100%;
  height: 100%;
  border: 10px solid blue;
  display: flex; flex-direction: column;
}

.container {
  width: 100%;
  height: 100%;
  border: 10px solid green;
  display: flex; flex-direction: column; flex: 1;
}

.content {
  padding-top: 64px;
  display: flex; flex-direction: column; flex: 1;  
}

.columns {
  border: 10px solid red;
  display: flex; flex: 1;  
}

.col {
  width: 33.3333%;
  font-family: monospace;
  display: flex;
  height: 100%;
  flex-direction: column;
  border: 10px solid black;
}

article {
  flex: 1 1 auto;
  overflow-y: scroll;
  /* added code */
  height: calc(100vh - 174px);
}
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div class="wrap">
    <div class="container">
      <div class="content">
        <div class="columns">
          <div class="col">
           <div class="b">
               <header>header</header>
             <article>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>
               oh<br/>               
             </article>
             <footer>footer</footer>   
           </div>         
          </div>
          <div class="col">#2</div>
          <div class="col">#3</div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search