I want to style a dialog so it is 4rem from the top of the viewport, and limit its height to a max of 4rem from the bottom. I am doing this with the following on the dialog:
<code>margin-top: 4rem;
max-height: calc(100% - 8rem);
overflow: auto;
</code>
<code>margin-top: 4rem;
max-height: calc(100% - 8rem);
overflow: auto;
</code>
margin-top: 4rem;
max-height: calc(100% - 8rem);
overflow: auto;
This works nicely, both on Chrome and Safari:
However, I don’t want the scrollbar on the dialog, but on a div inside the dialog, this because, in my real case, I buttons after the div, which I always want to be shown. That should be simple, shouldn’t it? Let’s move the overflow: auto from the dialog to the div, and add a height: 100% on the div. As you might have guessed by the tone, this doesn’t work. On Chrome, it is as if the height: 100% had no effect:
On Safari, the situation is even stranger:
What explains this behavior, and how can I get the expected result?
<code>.a {
border: 2px solid red;
padding: 5px;
box-sizing: border-box;
width: 500px;
top: 0;
max-height: calc(100% - 4rem);
margin-top: 2rem;
}
.b {
border: 2px solid blue;
padding: 5px;
box-sizing: border-box;
height: 100%;
overflow: auto;
}</code>
<code>.a {
border: 2px solid red;
padding: 5px;
box-sizing: border-box;
width: 500px;
top: 0;
max-height: calc(100% - 4rem);
margin-top: 2rem;
}
.b {
border: 2px solid blue;
padding: 5px;
box-sizing: border-box;
height: 100%;
overflow: auto;
}</code>
.a {
border: 2px solid red;
padding: 5px;
box-sizing: border-box;
width: 500px;
top: 0;
max-height: calc(100% - 4rem);
margin-top: 2rem;
}
.b {
border: 2px solid blue;
padding: 5px;
box-sizing: border-box;
height: 100%;
overflow: auto;
}<code><dialog class="a" open>
<div class="b">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
</dialog></code>
<code><dialog class="a" open>
<div class="b">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
</dialog></code>
<dialog class="a" open>
<div class="b">
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
</dialog>0
Heights in percent, in normal flow, need a “fixed” height on the parent element – which you don’t have here, since you’ve only given your dialog a min-height.
Remove the height: 100% from the inner div, and make the dialog a flexbox container.
I added a single button element at the end here, so illustrate that it should still give the desired result with buttons below the div – you’ll probably want to replace that with some container first, if you got multiple buttons.
<code>.a {
border: 2px solid red;
padding: 5px;
box-sizing: border-box;
width: 500px;
top: 0;
max-height: calc(100% - 4rem);
margin-top: 2rem;
display: flex;
flex-direction: column;
}
.b {
border: 2px solid blue;
padding: 5px;
box-sizing: border-box;
overflow: auto;
}</code>
<code>.a {
border: 2px solid red;
padding: 5px;
box-sizing: border-box;
width: 500px;
top: 0;
max-height: calc(100% - 4rem);
margin-top: 2rem;
display: flex;
flex-direction: column;
}
.b {
border: 2px solid blue;
padding: 5px;
box-sizing: border-box;
overflow: auto;
}</code>
.a {
border: 2px solid red;
padding: 5px;
box-sizing: border-box;
width: 500px;
top: 0;
max-height: calc(100% - 4rem);
margin-top: 2rem;
display: flex;
flex-direction: column;
}
.b {
border: 2px solid blue;
padding: 5px;
box-sizing: border-box;
overflow: auto;
}<code><dialog class="a" open>
<div class="b">
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<button>foo</button>
</dialog></code>
<code><dialog class="a" open>
<div class="b">
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<button>foo</button>
</dialog></code>
<dialog class="a" open>
<div class="b">
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Lorem ipsum dolor sit amet, consectetur adipiscing 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. Lorem ipsum dolor sit amet, consectetur adipiscing 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.
</div>
<button>foo</button>
</dialog>