Popup window width resizing when not needed - css

Question

So I have this thing popup-window on my homepage that I fill with some content. The problem I'm having with it is that it's resizeing way to early.
I don't want the popup to resize before getting to big for the window to handle.
How am I going to solve this? Been at it for some time, can't figure it out.
You can try it out in the jsiffle url, resize the width of the preview window and you'll see it shrinks before it's even needed.
http://jsfiddle.net/82gvnamL/
CSS:
#popup {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.75);
z-index: 2;
}
#popup #loading {
height: 32px;
width: 32px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: url('../img/ajax-loading.gif') no-repeat;
background-size: 32px 32px;
display: inline-block;
}
#popup #container {
max-width: 95%;
max-height: 95%;
padding: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: #111;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
}
#popup #content {
width: 100%;
font-family: 'Oxygen', sans-serif;
font-size: 12px;
color: #ccc;
text-align: left;
line-height: 16px;
}
#popup #close {
width: 20px;
height: 16px;
padding: 4px 0 0 0;
border: 1px solid #333;
border-radius: 50%;
float: right;
background: #222;
position: absolute;
top: -7px;
right: -7px;
font-family: 'Nunito', sans-serif;
font-size: 12px;
text-align: center;
color: #fff;
line-height: 12px;
cursor: pointer;
}
#popup #close:before {
content: 'X';
}
HTML:
<div id="popup">
<div id="container">
<div id="close"></div>
<div id="content">
<p>Very long string in here that should not get cut off until window width is too small. If you understand what I'm saying.</p>
</div>
</div>
</div>

Answer 1

Try changing the container's width like so"
#popup #container {
max-width: 255px;
width: 75%;
}
So on larger screens it will be a fixed width of 255px and on smaller screens it will shrink to 75% width.