I need scrollbar on inner element, not browser window (viewport)

Question

In the code below, how do I make the article container auto grow to consume the remaining vertical space below it, but the scroll bar to remain only for that element.

In other words, I want only the inside of article to scroll and not the entire browser window.

Is there a pure css solution? Or do I need javascript to detect the size of the browser window and adjust the height property of article dynamically?

html, body {
  //height: 100%;    

}
#outer_container {
  display: flex;
  flex-direction: row;
}
#outer2 {
  flex: 1 0 auto;
}
#outer2 {
  flex: 1 0 auto;
}
#container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  background-color: red;
}
#container header {
  background-color: gray;
}
#container article {
  flex: 1 1 auto;
  overflow-y: auto;
  height: 0px;
}
#container footer {
  background-color: gray;
}

<div id="outer_container">
  <div id="outer1">
    <h2>Outer 1</h2>
  </div>

  <section id="container">
    <header id="header">This is a header</header>
    <article id="content">
      This is the content that
      <br />With a lot of lines.
      <br />With a lot of lines.
      <br />This is the content that
      <br />With a lot of lines.
      <br />
      <br />This is the content that
      <br />With a lot of lines.
      <br />
      <br />This is the content that
      <br />With a lot of lines.
      <br />
    </article>
    <footer id="footer">This is a footer</footer>
  </section>


  <div id="outer2">
    <h2>Outer 2</h2>
  </div>
</div>

http://jsfiddle.net/ch7n6/907/

It was originally based on the answer to this question:
Flexbox and vertical scroll in a full-height app using NEWER flexbox api

Why not just add `height: 100%` to the `#outer_container`? http://jsfiddle.net/ch7n6/911/ — Michael Benjamin, Sep 11 '16 at 23:59
Interesting. I swear I tried this earlier and it didn't work. It's part of the reason I posted the question originally. It works now tho. If you make yours an answer can I accept yours as well? I actually prefer this for all the obvious reasons. — w--, Sep 12 '16 at 06:44

score 1 · Accepted Answer · answered Sep 11 '16 at 23:27

1

You can try setting position:fixed to your outer container (http://jsfiddle.net/ch7n6/909/):

#outer_container{
display:flex;
flex-direction:row;
top:0;
bottom:0;
position:fixed;
}

If it doesn't work for your design, you can change the container dimensions using window.onresize event.

answered Sep 11 '16 at 23:27

Nadia Chibrikova

4,916
1
15
17

that works! Thank you. It has an interesting side effect. The flexboxes #outer1 and #outer2 now grow to the full height of #outer_container. Is this expected? is there a css property I can set so their height depends on their content? – w-- Sep 11 '16 at 23:37
1

Yes, there is - 'align-self:flex-start;'. It should be set on both containers (#outer1 and #outer2), and they will stop growing – Nadia Chibrikova Sep 11 '16 at 23:42
boss. Thank you again. – w-- Sep 11 '16 at 23:46

score 0 · Answer 2 · edited May 23 '17 at 12:15

In your code you commented out:

html, body {
  //height: 100%;    
}

But I think you were on the right track.

By uncommenting that rule, and adding height: 100% to .outer_container, your layout may be complete.

Try this:

html, body {
  height: 100%;                   /* uncommented */
  margin: 0;                      /* removes default margin */
}
#outer_container {
  height: 100%;                   /* new; see details below */
  display: flex;
  flex-direction: row;
}
#outer2 {
  flex: 1 0 auto;
  background-color: lightblue;     /* just for demo */
}
#outer1 {                          /* correction to duplicate ID */
  flex: 1 0 auto;
  background-color: lightgreen;    /* just for demo */
}
#container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  background-color: red;
}
#container header {
  background-color: gray;
}
#container article {
  flex: 1 1 auto;
  overflow-y: auto;
  height: 0px;
}
#container footer {
  background-color: gray;
}

<div id="outer_container">
  <div id="outer1">
    <h2>Outer 1</h2>
  </div>
  <section id="container">
    <header id="header">This is a header</header>
    <article id="content">
      This is the content that
      <br />With a lot of lines.
      <br />With a lot of lines.
      <br />This is the content that
      <br />With a lot of lines.
      <br />
      <br />This is the content that
      <br />With a lot of lines.
      <br />
      <br />This is the content that
      <br />With a lot of lines.
      <br />
    </article>
    <footer id="footer">This is a footer</footer>
  </section>
  <div id="outer2">
    <h2>Outer 2</h2>
  </div>
</div>

jsFiddle

To understand how this solution works, and what may have held you up, take a look at these posts:

I need scrollbar on inner element, not browser window (viewport)

2 Answers2

jsFiddle

Linked