div not using available space (div:inline-block, position:fixed) - css

Question

I've got a problem with a div whichis used as a overlay/"popup". I want it to use a max-width of 90% if needed. Unfortunately it always uses around 50% although theres more then enough text to fill the whole screen. But instead of using the width (too) it only stretches it vertically (which is fine). I am trying to avoid a absolute width-attribute because i want some kind of "width: auto;".
These are the relevant/applied styles (copied from the developer console):
element.style {
display: inline-block;
opacity: 1;
}
#media (min-device-width: 1000px) {
.Dialog_window {
max-height: 90%;
max-width: 90%;
width: auto;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transition: translate(-50%, -50%);
-o-transition: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
}
.Dialog_window {
background-color: #EEE;
padding: 20px;
border: 1px solid #FFF;
position: fixed;
overflow: auto;
z-index: 100000;
left: 50%;
top: 50%;
}
html {
font-size: 100%;
}
html {
font-family: sans-serif;
}
the Dom-Element is declared like this:
<div id="myID" class="Dialog_window" style="display: inline-block;"> [...] </div>
Thank you for any help in advance!
Regards

Answer 1

max-width and max-height tell the browser, "take up as much space as you need, but not any more than [x]". You're not forcing the element to occupy 90%, you're saying, "Not more than 90%". Unless you have enough content in the element to take up this space, this is the wrong property to style.
you may want to try using min-width and min-height, as these tell the browser, "starting at [x], take up this space".
since 90% of an absolutely positioned element is a lot of space, why not just stick with a fixed measurement, like width: 90%; max-height: 90%;?
.Dialog_window {
max-height: 90%;
width: 90%;
transform: translate(-50%,-50%);
}
If you need a flexible window, that sits within ranges, you should use both min-width and max-width:
.Dialog_window {
min-height: 50%;
max-height: 90%;
min-width: 50%;
max-width: 90%
transform: translate(-50%,-50%);
}