Css Divs overflow

Question

I have 2 divs, first div must adapt height about content and second div must be height the remnant. The second div must scroll to show all items This is the template

here my example JSFiddle link I don't want javascript, only CSS

<div class="tbl">
  <div class="header">
    <p>1</p>
    <p>2</p>
  </div>
  <div class="body">
    <div class="in-body">
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
    </div>
  </div>
</div>

Answer 1

Here it is. I made the second div be at least 35% of window height. If you want the min height of second div to be higher or smaller, adjust the 65vh on the wrapper. (100vh is the viewport and what's not wrapper height is second div height).

body {
  margin: 0;
}
.wrapper {
  width: 35%;
  max-height: 65vh;
  position: relative;
}
.first,
.second {
  width: 100%;
  color: white;
  padding: 15px;
  box-sizing: border-box;
}
.first {
  background-color: green;
}
.second {
  background-color: blue;
  position: absolute;
  height: calc(100vh - 100%);
  top: 100%;
  overflow-y: auto;
}

<div class="wrapper">
  <div class="first">
    kitsch flannel direct trade listicle ramps truffaut.
  </div>
  <div class="second">
    Brunch fingerstache bespoke squid neutra. Cred hella meh, slow-carb kale chips fashion axe vinyl keytar banjo butcher ethical affogato taxidermy. Bicycle rights venmo lomo truffaut. Art party kickstarter vice, truffaut yr 90's farm-to-table. Banh mi try-hard
    distillery, next level mumblecore jean shorts sustainable drinking vinegar squid banjo 3 wolf moon. Slow-carb waistcoat fashion axe, try-hard kinfolk flexitarian hella pitchfork semiotics truffaut blue bottle stumptown. Asymmetrical skateboard distillery
    chambray.
  </div>
</div>