Flex with scrollable container

by stevenkaspar

HTML

<div class='flex-column'>
  <div class='first'>
    <button onclick='getScrollHeight()'>
      get scroll
    </button>
  </div>
  <div class='second' id='TWO'>
      
2sf afasdfasdf asfas gaerrraadsdsadgadv a asdfasd a  sdfasd   asddfasd a sada d  hshf a lkahdflk hv laflkaugl kaslkah fladsdh  2sf afasdfasdf asfas gaerrraadsdsadgadv a asdfasd a  sdfasd   asddfasd a sada d  hshf a lkahdflk hv laflkaugl kaslkah fladsdh  2sf afasdfasdf asfas gaerrraadsdsadgadv a asdfasd a  sdfasd   asddfasd a sada d  hshf a lkahdflk hv laflkaugl kaslkah fladsdh  2sf afasdfasdf asfas gaerrraadsdsadgadv a asdfasd a  sdfasd   asddfasd a sada d  hshf a lkahdflk hv laflkaugl kaslkah fladsdh  2sf afasdfasdf asfas gaerrraadsdsadgadv a asdfasd a  sdfasd   asddfasd a sada d  hshf a lkahdflk hv laflkaugl kaslkah fladsdh  2sf afasdfasdf asfas gaerrraadsdsadgadv a asdfasd a  sdfasd   asddfasd a sada d  hshf a lkahdflk hv laflkaugl kaslkah fladsdh  2sf afasdfasdf asfas gaerrraadsdsadgadv a asdfasd a  sdfasd   asddfasd a sada d  hshf a lkahdflk hv laflkaugl kaslkah fladsdh  kaslkah fladsdh  2sf afasdfasdf asfas gaerrraadsdsadgadv a asdfasd a  sdfasd   asddfasd a sada d  hshf a lkahdflk hv laflkaugl kaslkah fladsdh  2sf afasdfasdf asfas gaerrraadsdsadgadv a asdfasd a  sdfasd   asddfasd a sada d  hshf a lkahdflk hv laflkaugl kaslkah fladsdh  2sf afasdfasdf asfas gaerrraadsdsadgadv a asdfasd a  sdfasd   asddfasd a sada d  hshf a lkahdflk hv laflkaugl kaslkah fladsdh  2sf afasdfasdf asfas gaerrraadsdsadgadv a asdfasd a  sdfasd   asddfasd a sada d  hshf a lkahdflk hv laflkaugl kaslkah fladsdh  2sf afasdfasdf asfas gaerrraadsdsadgadv a asdfasd a  sdfasd   asddfasd a sada d  hshf a lkahdflk hv laflkaugl kaslkah fladsdh  kaslkah fladsdh  2sf afasdfasdf asfas gaerrraadsdsadgadv a asdfasd a  sdfasd   asddfasd a sada d  hshf a lkahdflk hv laflkaugl kaslkah fladsdh  2sf afasdfasdf asfas gaerrraadsdsadgadv a asdfasd a  sdfasd   asddfasd a sada d  hshf a lkahdflk hv laflkaugl kaslkah fladsdh  2sf afasdfasdf...

SCSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.flex-column {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow-y: hidden;
}
.first {
  flex-grow: 0;
}
.second {
  flex-grow: 1;
  background: yellow;
  max-height: 100%;
  overflow-y: auto;
}

JavaScript

var two = document.getElementById('TWO');

function getScrollHeight(){
console.log(two.scrollTop, two.scrollHeight, two.offsetHeight);
}