Html Question posted in
Some basic documentation can be found here.

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

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>
Tags:

2

Answers


  1. 0

    Restrict the height of the card and content to 100%.

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

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

.card {
  position: absolute;
  background: red;
  height: 100%;
  padding: 8px;
  overflow: hidden;
}

.content {
  max-height: 100%;
  overflow: 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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search