CODEWITHSUNDEEP
htmlcss
Dan
Dan

Reputation: 7724

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.

Upvotes: 0

Views: 97

Answers (1)

KrisD
KrisD

Reputation: 483

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.

Upvotes: 1

Related Questions