CODEWITHSUNDEEP
htmlcss
user435421
user435421

Reputation: 927

Scroll bar for child of parent with percentage max height when child's height is unknown upfront

I am creating a simple pop-up dialog. Parent should have max-height: 90%. Parent has two children. First one is a title with min-height: Xpx and second is content which should fill the rest of the space (height). How do I describe rules for limiting content's height so that content would have scroll bar?

.parent {
    max-height: 90%;
}

.title {
    min-height: Xpx; /* title should be able to grow when needed*/
}

.content {
    overflow: auto;
}

<div class="parent">
    <div class="title">

    </div>
    <div class="content">

    </div>
</div>

Upvotes: 1

Views: 652

Answers (2)

DAVID AJAYI
DAVID AJAYI

Reputation: 2154

You are very close already. There is a property that makes it easy for you to achieve your content's height. Just set height as -webkit-fill-available. This should help:

.parent {
    max-height: 90%;
}

.title {
    min-height: Xpx; /* title should be able to grow when needed*/
}

.content {
    overflow: auto;
    height: -webkit-fill-available;
    overflow-y: auto; 
    overflow-x: hidden;
}

Upvotes: 1

Code Spirit
Code Spirit

Reputation: 5061

You can accomplish this using flexbox.

.parent {
  display: flex;
  flex-direction: column; //set directon top to bottom
}

.content {
  flex: 1; //Takes up remaining space
  overflow: auto; //show scrollbar when content is overflowing
}

And dont forget the vendor prefixes.

Upvotes: 1

Related Questions