Make scrollable div take up remaining height

Question

I'm trying to make a page with a very simple layout: a title that stays in one place, and content that scrolls under it. The div title will be an unknown height that displays all its contents. I want the content of the div to occupy all the space between the bottom of the header and the bottom of the AND page so that I can scroll.

I have several limitations to this:

• I don’t want to use fixed or absolute positioning to keep the title in place, but instead should have a div of perfect height displaying the content and only have that div that can be scrolled
• I do not want to set max-heightor any other property requiring knowledge of the height of the div header

Two methods that I learned to achieve this goal are using a table layout and using a flexible frame. I was unable to get the scroll to work with any of these two methods. Below is the code for both attempts. I am using React. Any pointers would be greatly appreciated. Thank!!

EDIT . I did this successfully using inline styles and measuring the height of the title after creating it. This worked on chrome on desktop computers, Android chrome and Android browser, but it broke in ios safari. I don’t know why this broke, and I am working on debugging, but I would prefer a cleaner solution that does not require inline styles. Thank!

reacting element:

var SimpleScrolly = React.createClass({
    render: function(){
        var lorem = "Lorem ipsum dolor sit amet... ";
        var sampleText = lorem + lorem + lorem + lorem;
        var sampleHeader = "this is a header!"

        return(
            <div className={"simple_scrolly"}>
                <div className={"header"}>
                    {sampleHeader}
                </div>
                <div className={"content"}>
                    {sampleText}
                </div>
            </div>
            );
    }
});

style for table layout:

.simple_scrolly{

  display: table;
  height: 100%;

  .header{
    display: table-row;
  }

  .content{
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: table-row;
  }
}

style for flexible layout:

.simple_scrolly{

  display:flex;
  flex-direction: column;
  align-items: flex-start;

  .header{
    flex-grow:0;
  }

  .content{
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex-grow:1;
  }
}

Answer 1

JS. , "".

, , http://codepen.io/elleestcrimi/pen/LENQvr

:

• flex-grow: 0 //This only fills up space as much as the content
• flex-grow: 1 //This way this fills up the space even if there is no content
• div #inner-content
• #inner-content #content, .
• !

:

#header
  flex-grow: 0

#content
  overflow: hidden
  flex-grow: 1
  position: relative

#inner-content
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  overflow: auto

body 
  display: flex
  flex-direction: column