All available height

Block taking all available height with scroll if its content overflow

by AntowaKartowa

HTML

<div id="outer">
  <div id="inner_fixed">
    I have a fixed height, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque possimus, quasi asperiores ullam fugiat harum corrupti debitis repellendus a quia consectetur, ducimus rerum, at eligendi itaque temporibus explicabo voluptas
    nostrum. Asperiores similique impedit dolore repellat voluptatibus eum sunt deleniti, accusamus quo. At consequuntur deleniti debitis amet earum cupiditate maxime consequatur hic temporibus ea, laudantium nemo voluptates libero nihil placeat repellat.
    Nobis, nostrum dicta tenetur. Inventore dolor quisquam reiciendis 
  </div>

  <div id="inner_remaining">
    <div id="inner_scroll">
      I take up the remaining height Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, distinctio odit. Fugit blanditiis impedit atque excepturi modi laborum, veniam deserunt repellat fugiat nesciunt voluptatibus nostrum sit iste esse inventore!
      Cupiditate in earum corporis nulla, unde aut molestias dolorum possimus vero hic suscipit omnis nostrum voluptas odio repellendus fugiat aliquam ipsa libero reprehenderit sunt dicta eveniet dolore veniam. Eius delectus accusantium repudiandae minima
      dolorem inventore. Sed eius voluptatibus excepturi nisi, quod, dolore possimus reiciendis officia soluta nesciunt quis nostrum saepe beatae doloremque! Accusantium, ea ipsa minus praesentium aliquam enim nobis provident veritatis deserunt beatae
      impedit laboriosam similique dignissimos neque id delectus magnam recusandae odio, quod et. Quo suscipit voluptas voluptatum inventore molestiae? Saepe quas inventore architecto fugiat rem quaerat, rerum ut quis laborum, voluptas, laboriosam deserunt
      recusandae ipsam. Sit eligendi, quidem, aliquam blanditiis praesentium distinctio fuga perferendis unde expedita deserunt tempore. Deserunt velit aperiam sapiente pariatur quas sed veniam ipsum neque ex rem. Harum suscipit necessitatibus mollitia
      laudantium quas...

CSS

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

#outer {
  display: table;
}

#inner_fixed {
  display: table-row;
  background-color: grey;
}

#inner_remaining {
  display: table-row;
  height: 100%;
  background-color: lightblue;
}

#inner_scroll {
  position: relative;
  height: 100%;
  overflow: auto;
}