Restrict absolute-positioned child-div's maximum height to parent height and make its child scrollable

Issue

I am trying to create a card with a header and content. The card's maximum height should be restricted by the parent's height. If the card can't fit, the content should be vertically scrollable.

EDIT: To clarify, the card should shrink-wrap if the content fits on the screen.

Here's my draft, which doesn't work:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  position: relative;
  height: "100vh";
}

.card {
  position: absolute;
  background: red;
  padding: 8px;
  margin: 16px;
}

.content {
  overflow-y: scroll;
}

<div class="parent">
  <div class="card">
    Header
    <div class="content">
      <pre>
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit. 
      </pre>
    </div>
  </div>

Solution

You might use flex:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  position: relative;
  height: 100vh;
}

.card {
  position: absolute;
  max-height: calc(100% - 32px);
  padding: 8px;
  margin: 16px;
  background: red;
  display:flex;
  flex-direction:column;
}

.content {
  overflow-y: auto;
}

<div class="parent">
  <div class="card">
    Header
    <div class="content">
      <pre>
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit.
  This should scroll if it doesn't fit. 
      </pre>
    </div>
  </div>

Answered By - Kosh