Jleibham Jleibham - 2 months ago 8x
HTML Question

Div with height % not collapsing into itself with overflow auto

Alright so this is the third time I've looked for help on a particular element I'm working on in an app so I apologize for the repetition.

I'm building a questionnaire for an application and I want all the questions to be contained in a div and the overflow hidden. The problem I'm currently running into is if the height doesn't exceed 80% of the window size the containing div doesn't collapse into itself and there is an unnecessary amount of whitespace left over.

I have tried to switch the questionnaire-box height style to max-height but this caused the overflow content of the .questions div to be hidden instead of scrollable.

I have a strong suspicion I may need to handle this with js but I prefer straight CSS and HTML if possible.

Anyone have any suggestions?

html, body {
height: 100%;

.questionnaire-container {
display: flex;
position: fixed;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 255, .1);

.questionnaire-box {
position: relative;
width: 80%;
height: 70%;
margin: 0 auto;
background-color: #ffffff;
overflow: hidden;

.questions {
height: 100%;
padding: 1rem 2rem;
overflow-y: auto;

<div class="questionnaire-container">
<div class="questionnaire-box">
<div class="questions">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


You have to move the padding from .questions to .questionnaire-box. Also, .questions has no (...-)width attributes set anymore, but the .questionnaire-box's max-width is calc(70vh - 2rem).

Fiddle: https://jsfiddle.net/moor131j/2/