I am currently developing an HTML/CSS dialog window that consists of a header and scrollable body. My goal is to have the body adjust in size according to its content, but display scrollbars within the body if the dialog extends beyond the browser window. Unfortunately, I am experiencing difficulty in making the body scrollable. Can anyone provide guidance on how to rectify this issue? Here is the code snippet that I am utilizing (accessible via jsFiddle: http://jsfiddle.net/4Xvfm/1/):
<div class="dialog">
<div class="header">Header</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, error, sunt, quaerat aliquid voluptatem dolorum in amet facere dolores cumque magnam placeat! Numquam, nisi, possimus facere iure eos minus repellat.
</div>
</div>
Below are the CSS styles being utilized:
.dialog {
background-color: red;
max-width: 100%;
width: 400px;
max-height: 100%;
/* Positioning the dialog at the center of the screen */
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.dialog > .header,
.dialog > .footer {
background-color: blue;
height: 50px;
}
.dialog > .content {
/* The scrolling functionality is not functioning as expected */
overflow: auto;
}