Dan Dan - 4 months ago 11
CSS Question

CSS Property "overflow-y: auto" causing very unexpected results

The following code is part of a custom 404 page I am planning on using on a website of mine. However there is a major problem when I add the line of code

overflow-y: auto;


The code below has the output which I expected it to. However when it the code inside the div reaches more than
75vh
the overflow is not visible.



* {
margin: 0;
padding: 0;
}

.main {
min-height: 100vh;
font-size: 1em;
overflow-Y: hidden;
}

.center {
float: left;
position: relative;
left: 50%;
}

.wrap {
width: 100%;
float: left;
position: relative;
left: -50%;
}

.load_extra {
display: block;
position: fixed;
z-index: 11;
bottom: 15px;
}

.prep {
align: center;
background: #00eaff;
outline: none;

padding: 8px;

color: white;

border-color: white;
border-style: dotted;
border-width: 3px;
border-radius:50%;
font-size: 1.375em;
}

.extra {
display: block;
position: fixed;
bottom: 10px;
max-height: 75vh;
width: 80vw;
z-index: 10;
}

pre {
font-family: monospace, monospace;
font-size: 0.85em;
display: block;
overflow-y: auto;
word-break: break-all;
white-space:normal;
padding: 10px;
margin: 0 0 10px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
max-height: 50vh;
}

<body class="main">
<div class="center load_extra">
<div class="wrap">
<button id="extra" class="prep">Button</button>
</div>
</div>

<div id="infoCont" class="center extra">
<div class="wrap">
<h1>Extra Information</h1>
<pre>Some URL</pre>
<p>The requested URL shown above could not be found on the server</p>
<hr>
</div>
</div>
</body>





In order to fix this problem I added the line
overflow-y: auto;
in
.extra
class. This is what caused a problem. When you run the code below half of the output is "missing". I am unsure of why this is occuring.



* {
margin: 0;
padding: 0;
}

.main {
min-height: 100vh;
font-size: 1em;
overflow-Y: hidden;
}

.center {
float: left;
position: relative;
left: 50%;
}

.wrap {
width: 100%;
float: left;
position: relative;
left: -50%;
}

.load_extra {
display: block;
position: fixed;
z-index: 11;
bottom: 15px;
}

.prep {
align: center;
background: #00eaff;
outline: none;

padding: 8px;

color: white;

border-color: white;
border-style: dotted;
border-width: 3px;
border-radius:50%;
font-size: 1.375em;
}

.extra {
display: block;
position: fixed;
bottom: 10px;
max-height: 75vh;
width: 80vw;
z-index: 10;
overflow-y: auto;
}

pre {
font-family: monospace, monospace;
font-size: 0.85em;
display: block;
overflow-y: auto;
word-break: break-all;
white-space:normal;
padding: 10px;
margin: 0 0 10px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
max-height: 50vh;
}

<body class="main">
<div class="center load_extra">
<div class="wrap">
<button id="extra" class="prep">Button</button>
</div>
</div>

<div id="infoCont" class="center extra">
<div class="wrap">
<h1>Extra Information</h1>
<pre>Some URL</pre>
<p>The requested URL shown above could not be found on the server</p>
<hr>
</div>
</div>
</body>





I would appreciate any help in fixing this problem.

Answer

Half of the output goes "missing" due to the left positions defined in center and wrap classes.

center class will position your container starting from 50% and then, the inner container (wrap) gets repositioned again with -50%. Since the overflow is applied on the parent div, half of the content is no longer visible.

One solution might be to move overflow-y: auto; to wrap class.

Another is to choose another way to center infoCont div.

<div id="infoCont" class="extra">
   <h1>Extra Information</h1>
   <pre>Some URL</pre>
   <p>The requested URL shown above could not be found on the server</p>
   <hr>
</div>

.extra {
    display: block;
    position: fixed;
    bottom: 10px;
    max-height: 75vh;
    width: 80vw;
    z-index: 10;
    overflow-y: auto;
    margin: 0 auto; /* set margin to auto */
    left: 0;        /* set also left and right because position is fixed */
    right: 0;
}

See working example.

Comments