Related
I don't know why but the 2 divs of my html page are overlapping each other instead of being displayed side by side. Also, the blue div doesn't takes 100% of the height like it should. NOTE: the blue div only has 1 element for the moment (an Imput)
Here is my CSS code:
.bluediv {
height: 100%;
width: 16.3%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
box-shadow: 0px -10px 50px black;
float: left;
}
.reddiv{
height: 100%;
}
Thanks, CyberFlame
You can use display flex by default direction row like this:
html,
body {
padding: 0;
margin: 0;
}
.sect-div {
width: 100%;
display: flex;
height: 400px;
}
.sect-div .side {
width: 20%;
background-color: #007fff;
}
.sect-div .main {
width: 80%;
background-color: #ff0000;
}
<section class="sect-div">
<div class="side">width = 20%</div>
<div class="main">width = 80 %</div>
</section>
Fixed aside:
html,
body {
padding: 0;
margin: 0;
}
.sect-div {
width: 100%;
height: 100vh;
display: flex;
overflow: hidden;
}
.sect-div .aside {
width: 20%;
padding: 5px;
box-sizing: border-box;
background-color: #007fff;
}
.sect-div .main {
width: 80%;
padding: 20px;
box-sizing: border-box;
background-color: #ff0000;
overflow-y: auto;
}
<section class="sect-div">
<aside class="aside">
<h2>width = 20%</h2>
</aside>
<main class="main">
<h2>width = 80 %</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, nihil nobis. Assumenda ipsam ad suscipit qui dicta vero porro rem sequi? Non dolore magni sed itaque minima esse repellendus vero. Recusandae dignissimos, commodi natus assumenda architecto
aut libero corporis, magni ut quo, soluta voluptate. Similique, perferendis. Nam, recusandae debitis totam nihil reiciendis quod, atque distinctio adipisci quo esse necessitatibus dolorum! Incidunt corporis ex placeat, est doloribus magni repellendus
deleniti nam recusandae eveniet dolorem. Dolores aliquid assumenda perferendis odit esse dignissimos, corrupti mollitia ea doloremque libero molestias. Ab nisi voluptas provident. Voluptatum sit aut sequi ab sunt blanditiis asperiores dicta quos
totam accusamus voluptatem deserunt veritatis possimus suscipit earum corrupti esse ducimus illo, consequuntur omnis rem. Laudantium debitis eveniet facilis recusandae. Minus, exercitationem. Minus distinctio ipsam, vero ab autem consectetur iusto
soluta, eligendi similique consequatur natus, laborum asperiores amet repudiandae expedita temporibus fugit aliquid sint quo quod libero blanditiis adipisci. Ea. Earum minus, doloribus recusandae tempora fugiat, sunt voluptates nesciunt a magnam
placeat impedit harum dicta aspernatur doloremque debitis neque exercitationem cumque voluptate quod possimus? Dicta vel fugit officiis voluptates consequuntur. Nisi praesentium, at, quis beatae voluptate similique doloribus iusto tempore saepe
officiis tempora molestiae necessitatibus reiciendis asperiores repellat unde dicta vel aliquid enim dolorem. Nulla excepturi sapiente debitis aliquid assumenda! Vitae nulla quos laborum provident harum maiores ex dolorem, distinctio corrupti est
amet ipsa rem possimus blanditiis quasi architecto deserunt a debitis velit accusantium voluptate beatae. Commodi cum atque iste? Saepe assumenda vitae repellat optio minus ad nulla illo ducimus ullam et sit atque aliquid dignissimos aliquam eius
quae earum, eum tenetur ratione ex eligendi cumque vel similique. Modi, atque! Sit quam ut et a ducimus qui eveniet voluptas corrupti nam totam libero ipsum cum repellat magnam dolores, incidunt saepe nostrum! Nemo ipsa aspernatur dolorum nulla
possimus voluptas voluptates optio? Adipisci saepe autem vitae totam sunt ab, voluptatibus omnis, voluptas incidunt reprehenderit illo praesentium. Magnam maxime dignissimos totam tempora quo id velit eligendi! Quas tenetur accusantium culpa doloremque
ipsa assumenda? Ab perspiciatis sequi consequuntur ratione voluptates illum architecto incidunt, dolorem perferendis ad vel suscipit magnam aspernatur distinctio provident vero velit error autem aliquid. Dolorum nesciunt saepe repellat sed, commodi
dolorem! Quis minima, impedit autem dolore deserunt alias sunt animi porro quae ratione dignissimos, ipsum fugit quaerat tempore repellat adipisci vel deleniti cupiditate commodi iste dolorem accusamus a! Tempore, quia ut. Repellendus, debitis ipsam
quasi sed fuga consequatur. Quo, expedita? Voluptatibus laborum aut nisi illum impedit culpa doloribus ullam autem, quae soluta quidem! Reprehenderit dolorem impedit quis, pariatur adipisci facere nemo. Soluta numquam placeat saepe, sit veniam cupiditate
praesentium eos iure omnis odio consectetur vel corrupti quis, ipsa provident perspiciatis. Cumque, vitae! Unde alias atque voluptatum debitis deserunt possimus veniam cumque. Vero aut tempore unde eum harum, aliquam beatae praesentium nulla atque
vel ipsam natus? Recusandae ipsa repudiandae harum inventore distinctio, quod neque perspiciatis, ducimus animi doloremque, illo enim rerum aut. Voluptas molestiae possimus itaque, rem dignissimos non mollitia ipsum quo pariatur cum! Atque tempora,
assumenda soluta sed doloribus debitis iusto ratione delectus minus necessitatibus velit corporis officiis maxime porro minima? Harum, voluptatum sapiente nulla laborum at nobis temporibus iste vitae distinctio ipsum saepe beatae amet minima id,
consequatur delectus iure error et ab quis fugiat! Libero maiores maxime beatae! Tempore. Quasi aliquid voluptatibus odio dolores molestias consequatur repudiandae ipsum corporis neque officiis, ad fuga dicta repellat, earum sed dolore et voluptatum
reiciendis saepe, obcaecati voluptates maxime cupiditate quod sint? Nesciunt. Maiores consequuntur obcaecati ratione iure suscipit pariatur laudantium eius natus voluptate sint nostrum impedit odio deserunt placeat, quod ducimus, architecto nesciunt
facilis? Sit dicta tempore tenetur culpa, ullam quis sed? Accusamus sit recusandae quidem aperiam sapiente. Ratione autem odit quo odio officiis optio rem magni magnam illum, tempora dolores similique dignissimos necessitatibus non alias labore,
repellat eos itaque dolorum voluptates! Voluptatibus, quasi exercitationem quae recusandae quidem porro praesentium optio magnam quas sed, corrupti necessitatibus ex ratione alias eius odio possimus cum sapiente, dolore eos officia perferendis accusantium
qui vel. Quo? Perferendis sint labore itaque, asperiores suscipit omnis, dolorum atque laudantium aspernatur odio laboriosam sunt at quisquam sit aut veniam voluptas inventore ipsam expedita blanditiis laborum explicabo nesciunt, architecto modi.
Labore. Repellat dolor officia quos maxime iusto sed! Magni quod quibusdam deleniti animi harum? Enim soluta dolorem magni a ipsam aspernatur cumque molestiae, tempore tenetur culpa veniam eos laudantium animi vel! Debitis cumque non corrupti dolorem,
architecto nesciunt autem, ea perspiciatis aliquid, laborum aspernatur a asperiores maiores voluptatem? Molestiae esse aspernatur repellendus, odio minima, doloremque, maiores dolores amet quas iusto reiciendis. Ea, incidunt! Aliquam incidunt voluptates,
voluptate laudantium vel explicabo necessitatibus fugit laboriosam excepturi veniam enim nesciunt dolore. Odit, quas culpa provident a explicabo, consequatur officiis voluptatibus temporibus placeat, eveniet sapiente. Quia amet et aliquam ipsa,
nulla, repellat, facilis rem tempora harum eligendi quos. Deleniti fugiat molestiae sed deserunt, consequuntur commodi excepturi aliquam quam, nihil culpa quasi soluta quos eum ratione? Illum temporibus quia minus, recusandae, culpa autem sequi
porro officia magni eligendi voluptates facilis consequatur dolore? Officia ratione cum est neque inventore ut accusamus voluptas dolores, distinctio, optio quibusdam magni. Odio quidem expedita quasi, possimus aperiam tempore blanditiis veritatis
soluta ex iste voluptas maiores! Dignissimos laudantium earum minus alias dolorem sed est a ullam molestias? Consequuntur sunt unde ipsam fugit? Sed, praesentium excepturi repellendus harum voluptatum, obcaecati magni ex accusamus est natus aliquid
molestiae. Mollitia, magnam. Vitae fuga optio quia sit ullam fugit cupiditate minus maxime quas? Nemo, quidem asperiores? Repudiandae aut explicabo illo labore, consectetur ab nam minima, incidunt dolorum reprehenderit, eaque soluta quaerat laborum
sed autem! Dolorem voluptate possimus iure, quae accusantium voluptatibus molestiae voluptatem cum optio tempore! Sunt laborum libero, est quaerat ut itaque similique alias explicabo ipsam mollitia fuga ea nisi voluptates non totam aspernatur ipsum
molestiae quo saepe distinctio et sint eveniet accusantium neque! Perferendis. Tenetur placeat impedit tempora incidunt eligendi qui fuga laborum consequuntur amet. Quibusdam voluptate officiis iure! Accusamus voluptatum, quam, hic officia veritatis
praesentium necessitatibus beatae maiores fugiat nemo soluta, et voluptates. Nobis adipisci tenetur a facilis, architecto, omnis, odit illum fuga error laboriosam similique assumenda sapiente. Iure, consequatur. Illum facilis debitis officiis doloribus?
Eaque modi ducimus vitae. Quod sint rerum blanditiis. Cumque dolores voluptatibus veritatis placeat dolor eaque molestias asperiores quia. Eos, illum. Perspiciatis repellat minus nesciunt omnis, praesentium quod ad magni voluptas maxime facilis
aut asperiores blanditiis nulla deserunt saepe? Commodi nostrum eveniet doloremque nobis ratione corporis ex praesentium omnis quas sint voluptatem itaque totam in explicabo unde, harum, vero, enim qui? Maxime deleniti tempore temporibus! Illo odio
libero quidem! Veritatis quos reiciendis odio magnam? Sequi, totam ea laborum at rerum magnam hic, iure voluptatibus porro distinctio ipsam amet cum illum qui consectetur repellendus fugiat, incidunt pariatur optio voluptate possimus. Fugiat temporibus
ad at sequi molestias vitae ipsum adipisci blanditiis quia veniam sit rerum quae, hic earum veritatis quas illum mollitia, esse harum deleniti dignissimos repellendus nihil? Quas, eligendi dolore! Atque, rerum molestias fuga dignissimos fugit voluptatum
dolor in sit soluta numquam natus modi porro obcaecati. Omnis dolorum neque quam, maiores adipisci natus perspiciatis quod dolore asperiores tempore. Molestiae, obcaecati. In praesentium odio perspiciatis aliquid est temporibus corrupti porro, molestiae
voluptatem qui assumenda quod beatae nulla nisi placeat deserunt reiciendis voluptatibus unde fuga enim accusamus numquam tempora. Beatae, eum nobis! Eos fuga inventore, ipsa quibusdam delectus, nihil voluptatum ipsam recusandae laborum soluta numquam
non voluptate vero natus qui ex sit? Magnam a quae voluptatem rem exercitationem veritatis consequuntur provident amet? Illum atque quisquam sapiente recusandae laboriosam laborum praesentium ab magnam veniam provident totam, fugiat nulla reiciendis
est ratione dolor, nostrum laudantium tempora impedit incidunt eaque? Expedita magnam sapiente veniam deleniti? Ipsa qui nemo corporis, quaerat quibusdam animi deleniti, aperiam ad expedita dicta obcaecati dolorum dolore adipisci ipsum eum consectetur
culpa ea praesentium sunt sapiente ipsam explicabo. Harum in ex ea? Nihil reprehenderit repudiandae nesciunt quaerat debitis ipsa rerum, tempora quam neque, beatae harum earum esse? Quod culpa consequatur eum a! Aut, aliquam temporibus deleniti
vel sapiente molestiae. Aperiam, eum dolor. Id accusantium error ipsum a aut consequatur esse quaerat quibusdam molestiae magnam, impedit suscipit doloremque, alias rem asperiores quas nam eligendi qui facilis porro eius! Recusandae sed enim nisi
et? Iure tenetur soluta ut quasi veniam explicabo quod odio commodi ullam, praesentium velit dolorum, repudiandae ex saepe fuga sit laboriosam provident nostrum facilis debitis a reiciendis unde. Libero, dolores vitae. Ducimus repudiandae officia
nihil nam consectetur, voluptatem velit ipsa maiores. Ea aspernatur corrupti soluta dolore quod enim perferendis aperiam ratione iste aut sapiente, ad impedit harum sed nulla in inventore. Error, at dolore. Nesciunt iure vel quis et asperiores placeat
in consectetur, ducimus, accusantium natus repellendus eveniet nemo aspernatur animi fugiat, sunt nisi error expedita provident! Accusantium reprehenderit exercitationem quis. Beatae impedit eaque est error non facere obcaecati rerum rem aperiam
magnam ullam illum, consequuntur cupiditate enim esse animi suscipit, culpa nulla aspernatur distinctio recusandae voluptate! Inventore mollitia reprehenderit praesentium! Minima incidunt hic atque non corporis unde distinctio, repellendus ut numquam
dignissimos possimus iure, deserunt similique est dolor magnam fugiat assumenda laboriosam aliquam. Tempora sint illo, quae iure aliquam nobis. Nemo quos, ipsa dicta quae cumque quidem nostrum laboriosam! Dolores, non officia? Omnis voluptatem sint,
magni eveniet aliquam asperiores illo tempora assumenda fugiat iure, laborum, magnam expedita mollitia molestias quo? Asperiores vero eos voluptatibus quasi atque eum beatae, qui nam sit, rem maiores quidem nostrum explicabo iure sequi natus sed,
laudantium eveniet ad illum? Nam asperiores consequuntur eum quasi eligendi. Sunt aliquam aperiam accusantium praesentium facilis laborum cum voluptate qui magnam. Expedita ducimus maiores harum iure consectetur consequuntur sed, fugit officia.
Est soluta nostrum voluptate voluptates perferendis dolore eos? Tempore! Velit voluptate soluta possimus, voluptatem obcaecati nesciunt numquam laborum a aperiam suscipit necessitatibus veniam. Alias rerum veritatis quibusdam. A culpa est accusantium
odio vero voluptate maxime veniam tempore. Animi, neque! Animi iusto a reprehenderit dolores inventore. Ipsum quo omnis voluptas. Perferendis, officia obcaecati ut consequuntur voluptas debitis dolores amet quasi accusantium possimus explicabo vitae
harum veniam enim consequatur corrupti a? Omnis.
</p>
</main>
</section>
Okay. I think this should help.
We'll call the div containing both the red and blue divs "box", we'll give it a class of box, and the red and blue divs will have a class of their respective colors.
the html will go like this:
<div class="box"> <div class="blue"></div> <div class="red"></div> </div>
then your css:
.box {
display: flex;
width: 600px;
height 400px;
}
.blue{
width :20%;
height: 100%;
background : blue;
}
.red{
width :80%;
height: 100%;
background : red;
}
If you want the blue div to be fixed then you should:
1- divide the width between them evenly considering every single pixel you add like shadow, margin, or padding for them.
2- float the red one to the right.
3- To make sure they always fill viewport height, use vh instead of %
body {
padding: 0;
margin: 0;
}
.left {
color: white;
height: 100vh;
width: 16.3%;
background: blue;
position: fixed;
top: 0;
left: 0;
}
.right {
color: white;
height: 200vh;
width: 83.7%;
background: red;
float: right;
}
<section class="container">
<div class="left">width = 16.3%</div>
<div class="right">width = 83.7%</div>
</section>
.Chapter {
padding-bottom: 30vh;
break-before: right !important;
}
The good news: chapters begin in their own page
The bad news: the expected behaviour
"Forces one or two page breaks right before the principal box,
whichever will make the next page into a right page"
is blatantly ignored by the browser and any epub reader. Any way to fix this? Oh and break-before: recto won't work either.
To achieve what you want, you need to use a pollyfill, like paged.js.
I've created a minimal example using the pollyfill which achieves what you want. Put following code in a separate html file, then open it in Chrome and click on print button.
<!DOCTYPE html>
<html lang="en">
<head>
<link media="print" rel="stylesheet"
href="https://www.pagedjs.org/css/pagedjs/interface.min.9b2f873f23cdd2a5e7c0f7a444b030c5.css">
<script src="https://www.pagedjs.org/js/paged.polyfill.e35b32228f7c0ce277c05a9b4d3db5c5.js" type="module"></script>
<script>
window.PagedConfig = { auto: false };
window.addEventListener("load", function () {
if (document.querySelector('#print')) {
document.querySelector('#print').addEventListener("click", preview);
}
});
async function preview() {
await window.PagedPolyfill.preview();
window.print();
}
</script>
<style>
#print {
position: fixed;
z-index: 20000;
padding: .7em;
right: 10px;
top: 10px;
font-size: 1.5em;
background-color: greenyellow;
border: 1px dashed red;
}
.chapter {
border: 1px dotted green;
}
#media print {
h1 {
string-set: title content(text);
}
#print {
display: none;
}
#page {
size: A4;
#bottom-center {
content: "Page "counter(page) " of "counter(pages);
font-size: 4mm;
color: gray;
}
#top-left {
content: string(title);
color: gray;
font-size: 4mm;
}
}
#page :blank {
#top-left {
content: none;
}
}
.chapter {
border: none;
break-before: right;
}
}
</style>
</head>
<body>
<section class="chapter">
<h1>Chapter 1 abc</h1>1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eligendi velit dicta
sapiente
culpa dolor est officiis optio? Recusandae soluta iure minus quisquam magnam ullam vel eius facilis. Corrupti, sunt
dolores rerum corporis aliquid, ducimus Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis eum
nemo veniam est expedita modi nam quia, amet, quidem quam minima repellendus! Nihil voluptate cupiditate odit
impedit, a, nemo omnis aspernatur similique quasi labore unde accusamus! Numquam corporis, facere sunt porro
aspernatur perspiciatis facilis provident inventore eveniet quisquam voluptate obcaecati, nostrum ex modi, sint
doloremque unde aperiam? Vero eius illum ex ratione pariatur similique fugiat reprehenderit cupiditate neque error?
Dolorem ea quod, eveniet nemo repellat placeat omnis vitae quaerat, vero ipsa quas officia aperiam ipsum,
necessitatibus ullam pariatur! Commodi beatae corporis voluptas aliquam, doloribus molestias saepe neque placeat,
quae quam repudiandae, asperiores fugiat possimus a omnis. Obcaecati alias, iure dolore maxime voluptas minus
nesciunt repellat, officiis ab commodi quos ullam earum dolorum. Iusto culpa delectus consectetur pariatur aliquid
minus at fuga porro, quaerat, totam officiis ipsam ad nesciunt. Rem hic quisquam iure. Repudiandae quisquam quo
porro alias obcaecati ut aperiam veritatis laborum, quasi perferendis, tempora dolore? Dolorem aperiam accusantium
doloribus consequatur, autem earum. Dolor accusantium, labore quasi amet nisi totam quibusdam fugit a adipisci
distinctiosi veritatis optio natus quo, nulla repellat ad inventore assumenda omnis, nemo doloremque
minus sapiente modi possimus dolor rerum quidem nisi ea. Dolor harum neque aperiam, quidem saepe repellat voluptatum
ipsum placeat? Quibusdam, dolorem similique in alias nesciunt sunt recusandae libero fugiat quas quod architecto
consequatur ex qui exercitationem unde quidem nisi rerum totam asperiores ipsum. Ratione accusantium voluptates
debitis possimus minima animi? Cum, esse magnam illum placeat minus facilis voluptas sit dolore blanditiis quidem
dolores fugit facere aperiam saepe provident, fugiat consequatur voluptatem, tenetur reprehenderit nulla sunt earum.
Possimus eum, quos soluta aperiam explicabo laudantium beatae minima sed nisi quod dignissimos ullam obcaecati odio
cupiditate ad facere exercitationem nulla, facilis sapiente? Excepturi quo voluptate quisquam cumque, sed natus.
Blanditiis sapiente eligendi error sint et labore ducimus totam porro nobis voluptas voluptatem excepturi ratione
tempora facilis esse laudantium fuga modi consequatur, quisquam harum voluptates. Nostrum id sapiente veniam fugiat
similique beatae voluptate dolorem officia corrupti deleniti commodi doloribus, aliquam expedita libero ipsam
repellat. Nesciunt consequatur quos nihil qui. Dolores quas eius odit maxime maiores labore veniam qui vitae,
consequuntur ratione magnam soluta, totam saepe illo eveniet voluptatem beatae ullam a assumenda, aliquam temporibus
nemo excepturi quibusdam. Fuga natus, quis totam doloribus libero aliquid illum nobis aut. Voluptatum maxime laborum
sint numquam nostrum dolor magnam, dicta iste corporis amet eveniet laudantium alias blanditiis fugit, quidem vitae
quia deserunt beatae magni nemo temporibus ipsam. Repudiandae atque cupiditate nostrum neque nobis ipsam architecto
commodi voluptatum quaerat fuga, aut inventore corporis modi minima saepe ipsa eligendi? Dolor ab sapiente pariatur
doloremque nemo delectus at accusamus libero, cum dolore eligendi. Fugiat quis atque aperiam quisquam, culpa quae
labore tempora repellendus voluptate sunt, est aliquid eligendi ullam laborum doloremque rem ut quod excepturi
consequuntur eius dolore enim incidunt ipsa pariatur! Dolorem, porro provident consequatur accusantium quis quia
obcaecati sequi, distinctio iusto magnam aliquid dicta nemo culpa eveniet. Quasi fuga eaque, deleniti dicta eligendi
ea at, quaerat recusandae fugiat animi reiciendis, inventore ipsum atque vero? Numquam illum facere quibusdam
assumenda! Excepturi modi quasi culpa debitis quia aliquam quibusdam! Sunt enim possimus nam ratione mollitia quas
amet fuga minima nihil ipsa laudantium velit odit maiores facilis vel, accusamus nulla consequatur fugit harum
pariatur quidem. Dignissimos dolorum eum vel doloremque earum molestiae voluptatem maiores labore nesciunt pariatur.
Suscipit aspernatur numquam exer perspiciatis facilis provident inventore eveniet quisquam voluptate obcaecati,
nostrum ex modi, sint
doloremque unde aperiam? Vero eius illum ex ratione pariatur similique fugiat reprehenderit cupiditate neque error?
Dolorem ea quod, eveniet nemo repellat placeat omnis vitae quaerat, vero ipsa quas officia aperiam ipsum,
necessitatibus ullam pariatur! Commodi beatae corporis voluptas aliquam, doloribus molestias saepe neque placeat,
quae quam repudiandae, asperiores fugiat possimus a omnis. Obcaecati alias, iure dolore maxime voluptas minus
nesciunt repellat, officiis ab commodi quos ullam earum dolorum. Iusto culpa delectus consectetur pariatur aliquid
minus at fuga porro, quaerat, totam officiis ipsam ad nesciunt. Rem hic quisquam iure. Repudiandae quisquam quo
porro alias obcaecati ut aperiam veritatis laborum, quasi perferendis, tempora dolore? Dolorem aperiam accusantium
doloribus consequatur, autem earum. Dolor accusantium, labore quasi amet nisi totam quibusdam fugit a adipisci
distinctio iusto excepturi exercitationem? In perferendis officiis vel est cumque magni corporis repellat iusto
consequuntur vitae maiores odit adipisci quibusdam optio, eius quas similique aliquam laudantium totam et! Ad
accusamus provident repudiandae dolorem earum culpa distinctio minus, molestias, mollitia doloribus voluptates odio?
Vitae ipsam recusandae perspiciatis adipisci, quos repudiandae id minus sequi animi delectus culpa distinctio eaque
doloribus necessitatibus alias sint perferendis mollitia fugiat architecto. Dolore placeat ipsa similique suscipit,
laborum exercitationem, modi pariatur sed ipsum saepe sunt, blanditiis accusantium adipisci doloremque iusto. Amet
labore fugiat, porro incidunt atque nemo corporis repudiandae quae debitis aperiam. Pariatur tempora, est veritatis
ipsa cupiditate aliquid sequi eum fugit quidem natus ex corrupti ratione! Reprehenderit, perferendis fugit. Unde
rerum numquam pariatur quos odio. Autem molestiae modi, quo fugiat unde eum officiis ea adipisci necessitatibus sit
expedita odit dolorum consectetur debitis aut, facere quidem optio rerum doloribus. Alias autem fuga dolore
consequatur nam repudiandae eligendi veritatis, neque inventore totam iusto minima ut vero non magnam, reprehenderit
assumenda corrupti. Quidem, laborum repudiandae facere adipisci consectetur doloremque iusto veritatis magni labore,
totam vitae repellat maiores maxime dolorum exercitationem nobis. Deleniti deserunt voluptatibus, voluptates ex
reiciendis dolorum quas corrupti magni omnis vitae, similique nostrum exercitationem blanditiis neque id voluptas
qui facilis? Obcaecati architecto modi quis unde quod corporis possimus labore. Quo non porro perferendis voluptates
obcaecati in neque consectetur totam exercitationem iste unde voluptate eligendi quod, commodi eveniet dicta maxime
reprehenderit suscipit alias quidem dolore deserunt dolores culpa? Modi ab, culpa consectetur voluptates quaerat
maiores minima impedit placeat at vel exercitationem sapiente eos debitis omnis iure architecto reiciendis veritatis
commodi, dolor laudantium excepturi repellat vitae voluptatum! Illo provident amet, rerum molestiae impedit quas ut,
minima doloremque nemo molestias ab a! Totam est perferendis omnis in vel reiciendis quaerat, repudiandae cupiditate
dicta asperiores necessitatibus et pariatur, commodi fugiat excepturi quo vitae at quam rem eveniet animi! Itaque
totam aspernatur ab quasi veritatis optio natus quo, nulla repellat ad inventore assumenda omnis, nemo doloremque
minus sapiente modi possimus dolor rerum quidem nisi ea. Dolor harum neque aperiam, quidem saepe repellat voluptatum
ipsum placeat? Quibusdam, dolorem similique in alias nesciunt sunt recusandae libero fugiat quas quod architecto
consequatur ex qui exercitationem unde quidem nisi rerum totam asperiores ipsum. Ratione accusantium voluptates
debitis possimus minima animi? Cum, esse magnam illum placeat minus facilis voluptas sit dolore blanditiis quidem
dolores fugit facere aperiam saepe provident, fugiat consequatur voluptatem, tenetur reprehenderit nulla sunt earum.
Possimus eum, quos soluta aperiam explicabo laudantium beatae minima sed nisi quod dignissimos ullam obcaecati odio
cupiditate ad facere exercitationem nulla, facilis sapiente? Excepturi quo voluptate quisquam cumque, sed natus.
Blanditiis sapiente eligendi error sint et labore ducimus totam porro nobis voluptas voluptatem excepturi ratione
tempora facilis esse laudantium fuga modi consequatur, quisquam harum voluptates. Nostrum id sapiente veniam fugiat
similique beatae voluptate dolorem officia corrupti deleniti commodi doloribus, aliquam expedita libero ipsam
repellat. Nesciunt consequatur quos nihil qui. Dolores quas eius odit maxime maiores labore veniam qui vitae,
consequuntur ratione magnam soluta, totam saepe illo eveniet voluptatem beatae ullam a assumenda, aliquam temporibus
nemo excepturi quibusdam. Fuga natus, quis totam doloribus libero aliquid illum nobis aut. Voluptatum maxime laborum
sint numquam nostrum dolor magnam, dicta iste corporis amet eveniet laudantium alias blanditiis fugit, quidem vitae
quia deserunt beatae magni nemo temporibus ipsam. Repudiandae atque cupiditate nostrum neque nobis ipsam architecto
commodi voluptatum quaerat fuga, aut inventore corporis modi minima saepe ipsa eligendi? Dolor ab sapiente pariatur
doloremque nemo delectus at accusamus libero, cum dolore eligendi. Fugiat quis atque aperiam quisquam, culpa quae
labore tempora repellendus voluptate sunt, est aliquid eligendi ullam laborum doloremque rem ut quod excepturi
consequuntur eius dolore enim incidunt ipsa pariatur! Dolorem, porro provident consequatur accusantium quis quia
obcaecati sequi, distinctio iusto magnam aliquid dicta nemo culpa eveniet. Quasi fuga eaque, deleniti dicta eligendi
ea at, quaerat recusandae fugiat animi reiciendis, inventore ipsum atque vero? Numquam illum facere quibusdam
assumenda! Excepturi modi quasi culpa debitis quia aliquam quibusdam! Sunt enim possimus nam ratione mollitia quas
amet fuga minima nihil ipsa laudantium velit odit maiores facilis vel, accusamus nulla consequatur fugit harum
pariatur quidem. Dignissimos dolorum eum vel doloremque earum molestiae voluptatem maiores labore nesciunt pariatur.
Suscipit aspernatur numquam exercitationem velit quos. Inventore nam necessitatibus iure vel ipsam porro natus
maxime vitae. Facilis, cumque qui nisi ex numquam molestias recusandae error! Accusamus, illum excepturi officia
labore exercitationem aperiam ipsum impedit repudiandae ex quos ad fugiat ut aliquam omnis dolor nemo nisi quae.
Quisquam maiores unde perspiciatis sunt debitis nesciunt neque illum aspernatur temporibus similique, nulla
voluptatem nostrum, omnis ipsa cum, aperiam vero modi a animi quia repellat delectus. Ex quod numquam nemo odit quas
nobis totam commodi! Quasi exercitationem quae officiis doloribus sed sint, fugit voluptatem voluptatum quo
voluptate veritatis saepe molestiae. Vitae consectetur quidem fuga veritatis odit deserunt consequuntur debitis,
soluta maxime. Laboriosam magnam sed id harum hic placeat, impedit nesciunt, minima rerum consectetur dolores nobis
eius. Assumenda quasi porro ab laudantium, ea itaque nostrum rem ullam deserunt? Amet aperiam molestias
voluptatibus.deleniti deserunt consectetur neque doloribus labore incidunt, error id
obcaecati repudiandae ad. Culpa, voluptatum voluptate.
</section>
<br>
<section class="chapter">
<h1>Chapter 2 def</h1>2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eligendi velit dicta sapiente
culpa dolor est officiis optio? Recusandae soluta iure minus quisquam magnam ullam vel eius facilis. Corrupti, sunt
dolores rerum corporis aliquid, ducimus deleniti deserunt consectetur neque doloribus labore incidunt, error id
obcaecati repudiandae ad. Culpa, voluptatum voluptate.
</section>
<button id="print">Print</button>
</body>
</html>
How to make "content" occupy the whole free area of the "wrapper" block and "content" has a scroll
conditions:
1) the "top" block cannot be set to a fixed height
2) flex-box / grid cannot be used
3) can't edit "top" class styles.
Please help me solve this problem.
https://jsfiddle.net/hr4oLda7/1/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
height: 300px;
width: 300px;
border: 1px solid #000;
}
.top {
padding: 24px;
border: 1px solid #000;
text-align: center;
}
.content {
border: 1px solid red;
height:100%;
overflow:auto;
}
<div class="wrapper">
<div class="top">Top</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat, nemo recusandae nostrum beatae molestias, fugiat deserunt similique maxime voluptatibus id quo in aut impedit illum nisi at repudiandae, inventore. Atque ut debitis deserunt possimus, eligendi molestiae iste qui doloremque quam quis. Ducimus dolor unde reiciendis porro quis qui illum vero quod natus omnis amet, repudiandae similique, dolorem temporibus consectetur illo praesentium maxime, cumque dicta saepe commodi corrupti provident laborum quam. Excepturi illum explicabo odit nihil quasi dolorum sapiente! Quasi quisquam hic odio expedita accusamus id, asperiores nam nulla fugit labore similique, ea, quo numquam odit. Velit ut sint assumenda vitae. Accusantium tempora inventore enim incidunt animi ipsam ullam culpa fuga asperiores quidem harum, repudiandae, voluptatibus, iusto laborum! Incidunt quam, nostrum placeat, suscipit libero quae earum veniam, quo soluta ipsam accusantium molestias. Vitae, neque sapiente iste sequi praesentium soluta non illo porro ea quibusdam maxime tenetur doloremque laborum excepturi ullam atque aperiam, expedita ab! Aperiam corporis veniam, similique alias veritatis obcaecati ratione dolores temporibus error fugiat voluptas nobis distinctio officia consequuntur et velit unde illo tenetur quidem sint id itaque in. Vero minus, temporibus accusamus quibusdam optio cum tempora ad beatae accusantium fugiat, laboriosam voluptatem voluptas nostrum officiis, hic. In deserunt fugiat, recusandae, temporibus aut quibusdam ex rem ut perspiciatis quisquam quam laudantium consequuntur quaerat excepturi commodi nobis optio tenetur ducimus ea voluptatum a facilis. Laboriosam harum maxime neque magnam, debitis obcaecati, amet quasi quod dolores aliquid, suscipit. At ea adipisci cum minima autem, alias, voluptatibus optio animi tenetur fugit eius dignissimos laboriosam blanditiis illum fugiat esse. Harum nobis illum magnam voluptatem dolore ut maiores veritatis maxime possimus, dolorum consequuntur, cumque quae perspiciatis quis animi aliquid officiis laboriosam ad distinctio laudantium tempora quibusdam recusandae! Sint ducimus repellat harum in soluta deserunt cupiditate rerum reiciendis nostrum non veniam id quas aliquam cumque labore animi corporis maxime consequuntur quo molestiae ad voluptatem, facere dolorem! Facilis, animi quaerat fuga minus eum dignissimos fugit similique, maiores laborum eaque aliquid sapiente quisquam, dolorum quasi alias tempora dolore esse ullam praesentium, eos itaque mollitia ipsa! Debitis, natus velit quos hic cupiditate amet ut eaque totam sint, a. Aperiam unde sapiente non eos odio voluptate impedit error nobis, modi saepe, velit vero ea, deserunt reiciendis tempore rem praesentium inventore recusandae laborum consequatur debitis dolores sed at. Quo cum, natus atque vero voluptate beatae minima ipsam autem quia voluptatem eligendi maiores vitae ipsum recusandae, consectetur animi culpa totam ducimus inventore. Asperiores cupiditate soluta officia officiis nesciunt veritatis reprehenderit ratione neque, libero ipsam nulla esse maxime repellendus magni provident fugit atque? Expedita incidunt, provident deleniti cumque dignissimos quas! Ratione eum iste, fuga minima tempora nemo aperiam ipsa excepturi modi voluptatem! Deleniti eius iusto reiciendis deserunt assumenda facilis, velit numquam explicabo aspernatur fugiat accusamus aliquid eaque officia quod, provident voluptate facere minima quis pariatur voluptatem doloribus temporibus. Ullam doloremque suscipit sint quidem quos debitis porro magni doloribus quisquam labore voluptatem natus, vitae itaque, dolores consectetur assumenda, asperiores iusto. A sit, cum fugiat magnam blanditiis tenetur quo beatae mollitia facere earum esse, dicta commodi totam ipsum recusandae provident dolor ullam! Veritatis dolores quae aperiam. Ratione ad deserunt voluptas voluptate reiciendis odio harum, et autem itaque commodi ab voluptatem amet dolore impedit earum adipisci eveniet distinctio? Magnam deserunt fuga, quidem, ratione, fugit natus repellendus ducimus quia nobis consectetur praesentium odit autem ad sint blanditiis nostrum perspiciatis cumque iusto quod laudantium minus. Minus nisi voluptas vitae voluptates laudantium, saepe molestiae explicabo quasi autem ipsum placeat et sint doloremque, quam ratione necessitatibus velit beatae! Reiciendis, enim totam quas placeat sunt, error rem excepturi necessitatibus quo officia atque laborum, sint dolorum ut consequatur impedit quasi esse quisquam nobis blanditiis quis ad reprehenderit, repellendus modi. Saepe doloribus maxime enim atque esse dolores ea in odit architecto! Recusandae quis sit ratione, id porro. Distinctio atque, minima praesentium mollitia nesciunt quae, ratione ipsa necessitatibus minus quasi libero est eius accusamus quos ut vero culpa cum quod eos illo magni maxime. Magni aspernatur suscipit atque, enim consequuntur temporibus repellendus modi pariatur molestias labore perspiciatis dolore autem, ratione quibusdam alias ab magnam quia non repellat tenetur possimus nulla iure dolores consectetur. Enim, officia consequuntur perferendis ducimus? Molestias omnis at, atque iusto veniam corporis sit iste repellendus voluptas! Beatae, excepturi voluptatem recusandae illum consequuntur cum repudiandae distinctio minus fuga! Itaque doloremque officiis fugit quidem tempore aperiam facere perspiciatis eos praesentium aspernatur, impedit, quasi et. Error iure fuga laboriosam commodi aliquid magni fugiat sed odio tenetur doloremque cum excepturi veritatis inventore quidem numquam esse dolorem, quae, veniam assumenda similique animi! Quia unde, dicta illo laboriosam odit fugiat itaque minima, officia odio error modi numquam, id. Quasi dicta, ab autem corporis ex. Hic, doloribus cumque. Consequuntur repudiandae modi, natus, dicta earum maxime unde ea tempora, eligendi enim necessitatibus quia non soluta veniam molestias error voluptatem iure, obcaecati praesentium rem! Tenetur ipsam assumenda incidunt distinctio nesciunt. Rem architecto atque repellendus alias, ex, vero vel tempora, tempore nisi magnam consequatur laboriosam dicta reprehenderit odit! Maiores ducimus eaque modi commodi aliquam libero omnis, quod, praesentium excepturi, at illo asperiores perspiciatis minima, eveniet magnam. Dolore, illum. Eius labore impedit blanditiis laborum modi quisquam consequuntur nihil earum itaque aut accusantium quas magnam placeat, totam reiciendis animi ipsam dolore. Assumenda ex esse recusandae ratione explicabo architecto, amet beatae labore magni ipsa, animi. Quisquam hic provident voluptates pariatur incidunt dolorem vero veritatis adipisci recusandae sunt error at, inventore libero porro nulla sapiente, eius quis quos itaque? Illum sequi aperiam iure officia, corporis, totam architecto quidem dignissimos deserunt, dolorum labore sapiente iusto saepe reprehenderit consequuntur. Unde ea deleniti quis est rerum voluptas molestiae explicabo quam, repellendus eius quo pariatur in temporibus placeat repellat, voluptates eligendi. Unde culpa voluptas, sit neque veniam consequatur quaerat facilis laborum doloribus at veritatis atque et hic cumque fuga corporis, fugiat deserunt. Assumenda corporis sequi commodi aut natus, odio nesciunt voluptates, nam dolorem repellendus similique vero iusto rerum, odit cum illum. Quas similique omnis, quae mollitia ea ad adipisci autem tempore. Laboriosam ipsa molestias voluptas tempora laudantium maxime praesentium. Maxime iste sequi, incidunt, illo similique ducimus quas.
</div>
</div>
```
If you can add an extra span to wrap the text of the top element you can hack it with table like below:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
height: 300px;
width: 300px;
border: 1px solid #000;
display: table; /* added */
}
.top {
padding: 24px;
border: 1px solid #000;
text-align: center;
/* added */
display: table-row;
height: 0;
/**/
}
/* added */
.top span {
display: table-cell;
padding: inherit;
}
/**/
.content {
border: 1px solid red;
overflow: auto;
height: 100%;
}
<div class="wrapper">
<div class="top"><span>Top</span></div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat, nemo recusandae nostrum beatae molestias, fugiat deserunt similique maxime voluptatibus id quo in aut impedit illum nisi at repudiandae, inventore. Atque ut debitis deserunt
possimus, eligendi molestiae iste qui doloremque quam quis. Ducimus dolor unde reiciendis porro quis qui illum vero quod natus omnis amet, repudiandae similique, dolorem temporibus consectetur illo praesentium maxime, cumque dicta saepe commodi corrupti
provident laborum quam. Excepturi illum explicabo odit nihil quasi dolorum sapiente! Quasi quisquam hic odio expedita accusamus id, asperiores nam nulla fugit labore similique, ea, quo numquam odit. Velit ut sint assumenda vitae. Accusantium tempora
inventore enim incidunt animi ipsam ullam culpa fuga asperiores quidem harum, repudiandae, voluptatibus, iusto laborum! Incidunt quam, nostrum placeat, suscipit libero quae earum veniam, quo soluta ipsam accusantium molestias. Vitae, neque sapiente
iste sequi praesentium soluta non illo porro ea quibusdam maxime tenetur doloremque laborum excepturi ullam atque aperiam, expedita ab! Aperiam corporis veniam, similique alias veritatis obcaecati ratione dolores temporibus error fugiat voluptas nobis
distinctio officia consequuntur et velit unde illo tenetur quidem sint id itaque in. Vero minus, temporibus accusamus quibusdam optio cum tempora ad beatae accusantium fugiat, laboriosam voluptatem voluptas nostrum officiis, hic. In deserunt fugiat,
recusandae, temporibus aut quibusdam ex rem ut perspiciatis quisquam quam laudantium consequuntur quaerat excepturi commodi nobis optio tenetur ducimus ea voluptatum a facilis. Laboriosam harum maxime neque magnam, debitis obcaecati, amet quasi quod
dolores aliquid, suscipit. At ea adipisci cum minima autem, alias, voluptatibus optio animi tenetur fugit eius dignissimos laboriosam blanditiis illum fugiat esse. Harum nobis illum magnam voluptatem dolore ut maiores veritatis maxime possimus, dolorum
consequuntur, cumque quae perspiciatis quis animi aliquid officiis laboriosam ad distinctio laudantium tempora quibusdam recusandae! Sint ducimus repellat harum in soluta deserunt cupiditate rerum reiciendis nostrum non veniam id quas aliquam cumque
labore animi corporis maxime consequuntur quo molestiae ad voluptatem, facere dolorem! Facilis, animi quaerat fuga minus eum dignissimos fugit similique, maiores laborum eaque aliquid sapiente quisquam, dolorum quasi alias tempora dolore esse ullam
praesentium, eos itaque mollitia ipsa! Debitis, natus velit quos hic cupiditate amet ut eaque totam sint, a. Aperiam unde sapiente non eos odio voluptate impedit error nobis, modi saepe, velit vero ea, deserunt reiciendis tempore rem praesentium inventore
recusandae laborum consequatur debitis dolores sed at. Quo cum, natus atque vero voluptate beatae minima ipsam autem quia voluptatem eligendi maiores vitae ipsum recusandae, consectetur animi culpa totam ducimus inventore. Asperiores cupiditate soluta
officia officiis nesciunt veritatis reprehenderit ratione neque, libero ipsam nulla esse maxime repellendus magni provident fugit atque? Expedita incidunt, provident deleniti cumque dignissimos quas! Ratione eum iste, fuga minima tempora nemo aperiam
ipsa excepturi modi voluptatem! Deleniti eius iusto reiciendis deserunt assumenda facilis, velit numquam explicabo aspernatur fugiat accusamus aliquid eaque officia quod, provident voluptate facere minima quis pariatur voluptatem doloribus temporibus.
Ullam doloremque suscipit sint quidem quos debitis porro magni doloribus quisquam labore voluptatem natus, vitae itaque, dolores consectetur assumenda, asperiores iusto. A sit, cum fugiat magnam blanditiis tenetur quo beatae mollitia facere earum
esse, dicta commodi totam ipsum recusandae provident dolor ullam! Veritatis dolores quae aperiam. Ratione ad deserunt voluptas voluptate reiciendis odio harum, et autem itaque commodi ab voluptatem amet dolore impedit earum adipisci eveniet distinctio?
Magnam deserunt fuga, quidem, ratione, fugit natus repellendus ducimus quia nobis consectetur praesentium odit autem ad sint blanditiis nostrum perspiciatis cumque iusto quod laudantium minus. Minus nisi voluptas vitae voluptates laudantium, saepe
molestiae explicabo quasi autem ipsum placeat et sint doloremque, quam ratione necessitatibus velit beatae! Reiciendis, enim totam quas placeat sunt, error rem excepturi necessitatibus quo officia atque laborum, sint dolorum ut consequatur impedit
quasi esse quisquam nobis blanditiis quis ad reprehenderit, repellendus modi. Saepe doloribus maxime enim atque esse dolores ea in odit architecto! Recusandae quis sit ratione, id porro. Distinctio atque, minima praesentium mollitia nesciunt quae,
ratione ipsa necessitatibus minus quasi libero est eius accusamus quos ut vero culpa cum quod eos illo magni maxime. Magni aspernatur suscipit atque, enim consequuntur temporibus repellendus modi pariatur molestias labore perspiciatis dolore autem,
ratione quibusdam alias ab magnam quia non repellat tenetur possimus nulla iure dolores consectetur. Enim, officia consequuntur perferendis ducimus? Molestias omnis at, atque iusto veniam corporis sit iste repellendus voluptas! Beatae, excepturi voluptatem
recusandae illum consequuntur cum repudiandae distinctio minus fuga! Itaque doloremque officiis fugit quidem tempore aperiam facere perspiciatis eos praesentium aspernatur, impedit, quasi et. Error iure fuga laboriosam commodi aliquid magni fugiat
sed odio tenetur doloremque cum excepturi veritatis inventore quidem numquam esse dolorem, quae, veniam assumenda similique animi! Quia unde, dicta illo laboriosam odit fugiat itaque minima, officia odio error modi numquam, id. Quasi dicta, ab autem
corporis ex. Hic, doloribus cumque. Consequuntur repudiandae modi, natus, dicta earum maxime unde ea tempora, eligendi enim necessitatibus quia non soluta veniam molestias error voluptatem iure, obcaecati praesentium rem! Tenetur ipsam assumenda incidunt
distinctio nesciunt. Rem architecto atque repellendus alias, ex, vero vel tempora, tempore nisi magnam consequatur laboriosam dicta reprehenderit odit! Maiores ducimus eaque modi commodi aliquam libero omnis, quod, praesentium excepturi, at illo asperiores
perspiciatis minima, eveniet magnam. Dolore, illum. Eius labore impedit blanditiis laborum modi quisquam consequuntur nihil earum itaque aut accusantium quas magnam placeat, totam reiciendis animi ipsam dolore. Assumenda ex esse recusandae ratione
explicabo architecto, amet beatae labore magni ipsa, animi. Quisquam hic provident voluptates pariatur incidunt dolorem vero veritatis adipisci recusandae sunt error at, inventore libero porro nulla sapiente, eius quis quos itaque? Illum sequi aperiam
iure officia, corporis, totam architecto quidem dignissimos deserunt, dolorum labore sapiente iusto saepe reprehenderit consequuntur. Unde ea deleniti quis est rerum voluptas molestiae explicabo quam, repellendus eius quo pariatur in temporibus placeat
repellat, voluptates eligendi. Unde culpa voluptas, sit neque veniam consequatur quaerat facilis laborum doloribus at veritatis atque et hic cumque fuga corporis, fugiat deserunt. Assumenda corporis sequi commodi aut natus, odio nesciunt voluptates,
nam dolorem repellendus similique vero iusto rerum, odit cum illum. Quas similique omnis, quae mollitia ea ad adipisci autem tempore. Laboriosam ipsa molestias voluptas tempora laudantium maxime praesentium. Maxime iste sequi, incidunt, illo similique
ducimus quas.
</div>
</div>
```
Or use position:sticky to have a similar layout:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
height: 300px;
width: 300px;
border: 1px solid #000;
overflow: auto; /* added */
}
.top {
padding: 24px;
border: 1px solid #000;
text-align: center;
/* added */
position:sticky;
top:0;
background:#fff;
/**/
}
.content {
border: 1px solid red;
}
<div class="wrapper">
<div class="top">Top</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat, nemo recusandae nostrum beatae molestias, fugiat deserunt similique maxime voluptatibus id quo in aut impedit illum nisi at repudiandae, inventore. Atque ut debitis deserunt
possimus, eligendi molestiae iste qui doloremque quam quis. Ducimus dolor unde reiciendis porro quis qui illum vero quod natus omnis amet, repudiandae similique, dolorem temporibus consectetur illo praesentium maxime, cumque dicta saepe commodi corrupti
provident laborum quam. Excepturi illum explicabo odit nihil quasi dolorum sapiente! Quasi quisquam hic odio expedita accusamus id, asperiores nam nulla fugit labore similique, ea, quo numquam odit. Velit ut sint assumenda vitae. Accusantium tempora
inventore enim incidunt animi ipsam ullam culpa fuga asperiores quidem harum, repudiandae, voluptatibus, iusto laborum! Incidunt quam, nostrum placeat, suscipit libero quae earum veniam, quo soluta ipsam accusantium molestias. Vitae, neque sapiente
iste sequi praesentium soluta non illo porro ea quibusdam maxime tenetur doloremque laborum excepturi ullam atque aperiam, expedita ab! Aperiam corporis veniam, similique alias veritatis obcaecati ratione dolores temporibus error fugiat voluptas nobis
distinctio officia consequuntur et velit unde illo tenetur quidem sint id itaque in. Vero minus, temporibus accusamus quibusdam optio cum tempora ad beatae accusantium fugiat, laboriosam voluptatem voluptas nostrum officiis, hic. In deserunt fugiat,
recusandae, temporibus aut quibusdam ex rem ut perspiciatis quisquam quam laudantium consequuntur quaerat excepturi commodi nobis optio tenetur ducimus ea voluptatum a facilis. Laboriosam harum maxime neque magnam, debitis obcaecati, amet quasi quod
dolores aliquid, suscipit. At ea adipisci cum minima autem, alias, voluptatibus optio animi tenetur fugit eius dignissimos laboriosam blanditiis illum fugiat esse. Harum nobis illum magnam voluptatem dolore ut maiores veritatis maxime possimus, dolorum
consequuntur, cumque quae perspiciatis quis animi aliquid officiis laboriosam ad distinctio laudantium tempora quibusdam recusandae! Sint ducimus repellat harum in soluta deserunt cupiditate rerum reiciendis nostrum non veniam id quas aliquam cumque
labore animi corporis maxime consequuntur quo molestiae ad voluptatem, facere dolorem! Facilis, animi quaerat fuga minus eum dignissimos fugit similique, maiores laborum eaque aliquid sapiente quisquam, dolorum quasi alias tempora dolore esse ullam
praesentium, eos itaque mollitia ipsa! Debitis, natus velit quos hic cupiditate amet ut eaque totam sint, a. Aperiam unde sapiente non eos odio voluptate impedit error nobis, modi saepe, velit vero ea, deserunt reiciendis tempore rem praesentium inventore
recusandae laborum consequatur debitis dolores sed at. Quo cum, natus atque vero voluptate beatae minima ipsam autem quia voluptatem eligendi maiores vitae ipsum recusandae, consectetur animi culpa totam ducimus inventore. Asperiores cupiditate soluta
officia officiis nesciunt veritatis reprehenderit ratione neque, libero ipsam nulla esse maxime repellendus magni provident fugit atque? Expedita incidunt, provident deleniti cumque dignissimos quas! Ratione eum iste, fuga minima tempora nemo aperiam
ipsa excepturi modi voluptatem! Deleniti eius iusto reiciendis deserunt assumenda facilis, velit numquam explicabo aspernatur fugiat accusamus aliquid eaque officia quod, provident voluptate facere minima quis pariatur voluptatem doloribus temporibus.
Ullam doloremque suscipit sint quidem quos debitis porro magni doloribus quisquam labore voluptatem natus, vitae itaque, dolores consectetur assumenda, asperiores iusto. A sit, cum fugiat magnam blanditiis tenetur quo beatae mollitia facere earum
esse, dicta commodi totam ipsum recusandae provident dolor ullam! Veritatis dolores quae aperiam. Ratione ad deserunt voluptas voluptate reiciendis odio harum, et autem itaque commodi ab voluptatem amet dolore impedit earum adipisci eveniet distinctio?
Magnam deserunt fuga, quidem, ratione, fugit natus repellendus ducimus quia nobis consectetur praesentium odit autem ad sint blanditiis nostrum perspiciatis cumque iusto quod laudantium minus. Minus nisi voluptas vitae voluptates laudantium, saepe
molestiae explicabo quasi autem ipsum placeat et sint doloremque, quam ratione necessitatibus velit beatae! Reiciendis, enim totam quas placeat sunt, error rem excepturi necessitatibus quo officia atque laborum, sint dolorum ut consequatur impedit
quasi esse quisquam nobis blanditiis quis ad reprehenderit, repellendus modi. Saepe doloribus maxime enim atque esse dolores ea in odit architecto! Recusandae quis sit ratione, id porro. Distinctio atque, minima praesentium mollitia nesciunt quae,
ratione ipsa necessitatibus minus quasi libero est eius accusamus quos ut vero culpa cum quod eos illo magni maxime. Magni aspernatur suscipit atque, enim consequuntur temporibus repellendus modi pariatur molestias labore perspiciatis dolore autem,
ratione quibusdam alias ab magnam quia non repellat tenetur possimus nulla iure dolores consectetur. Enim, officia consequuntur perferendis ducimus? Molestias omnis at, atque iusto veniam corporis sit iste repellendus voluptas! Beatae, excepturi voluptatem
recusandae illum consequuntur cum repudiandae distinctio minus fuga! Itaque doloremque officiis fugit quidem tempore aperiam facere perspiciatis eos praesentium aspernatur, impedit, quasi et. Error iure fuga laboriosam commodi aliquid magni fugiat
sed odio tenetur doloremque cum excepturi veritatis inventore quidem numquam esse dolorem, quae, veniam assumenda similique animi! Quia unde, dicta illo laboriosam odit fugiat itaque minima, officia odio error modi numquam, id. Quasi dicta, ab autem
corporis ex. Hic, doloribus cumque. Consequuntur repudiandae modi, natus, dicta earum maxime unde ea tempora, eligendi enim necessitatibus quia non soluta veniam molestias error voluptatem iure, obcaecati praesentium rem! Tenetur ipsam assumenda incidunt
distinctio nesciunt. Rem architecto atque repellendus alias, ex, vero vel tempora, tempore nisi magnam consequatur laboriosam dicta reprehenderit odit! Maiores ducimus eaque modi commodi aliquam libero omnis, quod, praesentium excepturi, at illo asperiores
perspiciatis minima, eveniet magnam. Dolore, illum. Eius labore impedit blanditiis laborum modi quisquam consequuntur nihil earum itaque aut accusantium quas magnam placeat, totam reiciendis animi ipsam dolore. Assumenda ex esse recusandae ratione
explicabo architecto, amet beatae labore magni ipsa, animi. Quisquam hic provident voluptates pariatur incidunt dolorem vero veritatis adipisci recusandae sunt error at, inventore libero porro nulla sapiente, eius quis quos itaque? Illum sequi aperiam
iure officia, corporis, totam architecto quidem dignissimos deserunt, dolorum labore sapiente iusto saepe reprehenderit consequuntur. Unde ea deleniti quis est rerum voluptas molestiae explicabo quam, repellendus eius quo pariatur in temporibus placeat
repellat, voluptates eligendi. Unde culpa voluptas, sit neque veniam consequatur quaerat facilis laborum doloribus at veritatis atque et hic cumque fuga corporis, fugiat deserunt. Assumenda corporis sequi commodi aut natus, odio nesciunt voluptates,
nam dolorem repellendus similique vero iusto rerum, odit cum illum. Quas similique omnis, quae mollitia ea ad adipisci autem tempore. Laboriosam ipsa molestias voluptas tempora laudantium maxime praesentium. Maxime iste sequi, incidunt, illo similique
ducimus quas.
</div>
</div>
```
I'm trying to lay out the main components of a site and have been mostly successful but when there's text overflow I seem to have done what resources say to put a scroll bar on an element. Still, the scroll bar doesn't appear.
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="mainStyle.css">
<title></title>
</head>
<body>
<div id="header">
<h1>Random header text</h1>
</div>
<div id="leftbar">
Leftbar text.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In numquam, fuga ipsam dolorum recusandae sed, quisquam accusamus provident autem repudiandae praesentium soluta ad. Beatae voluptatem voluptates dolorum id placeat laudantium.
</div>
<div id="mainContainer">
<div id="mainContent">
Initial text.
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta aliquid, nihil tempora, ex repellendus neque fugiat veniam voluptatibus quae vel dolores culpa, labore doloremque inventore vitae quam fuga velit esse!</div>
<div>Molestiae saepe id asperiores harum porro iure dolores illo, ducimus itaque esse culpa repellat, deleniti, doloremque inventore fugiat, amet explicabo rem. In dolorum aliquid dolore consectetur modi, maxime voluptas nisi.</div>
<div>Error veritatis dolorum numquam iure hic recusandae aspernatur ex incidunt corporis quam, praesentium modi consequatur maxime quidem minima asperiores voluptatem accusantium atque? Autem saepe non debitis voluptate maiores at, sequi?</div>
<div>Facere repudiandae nemo quod perferendis obcaecati officiis quis rem consectetur eligendi at necessitatibus incidunt reiciendis ad cum accusantium doloremque praesentium dolorem nobis veniam explicabo cumque error iste laudantium, quo. Impedit.</div>
<div>Esse earum voluptatum, libero tempore ad iure qui numquam iusto illo dignissimos quia quam laboriosam enim sapiente reprehenderit quod saepe provident consequatur molestiae ducimus, a accusamus dolores! Ea, officiis, esse!</div>
<div>Fugiat reiciendis, recusandae quaerat deleniti rem fuga magnam ut earum aliquam esse veritatis at omnis culpa reprehenderit praesentium alias? Vitae inventore tenetur pariatur cupiditate, cum, ratione aspernatur suscipit reprehenderit nihil!</div>
<div>Earum aliquid beatae qui! Facilis ipsum quos reprehenderit, architecto eveniet tempore ratione fuga voluptatum asperiores. Quia expedita quod vel totam velit dolorum placeat doloremque ab ipsa eius, dicta. Quam, eius!</div>
<div>Tenetur impedit dolores consectetur deleniti doloribus, et ea quam cumque reiciendis fuga iusto vel, facere libero praesentium fugit alias sed ipsam dolor autem minus, saepe velit totam inventore? A, illo.</div>
<div>Doloribus tempora non perspiciatis nobis pariatur quisquam deleniti, maxime voluptatem eum qui commodi, ducimus vel aut, unde corrupti libero, maiores sed perferendis nemo sequi? Repellat facilis rerum ut perferendis dolore.</div>
<div>Blanditiis fugiat, veniam, repellendus quaerat ea voluptatibus, aspernatur voluptate ratione, in odit a. Aliquam quae modi debitis, voluptatum neque suscipit vel minus odio vero quibusdam earum nesciunt magni obcaecati fugit.</div>
<div>Iure sed vel nostrum laudantium eligendi at quia, eaque numquam doloremque. Itaque cum reprehenderit quaerat nobis asperiores sed eum similique voluptatibus tempore necessitatibus porro doloremque, omnis molestiae cumque ipsam id.</div>
<div>Omnis, dolorum, molestiae. Iusto quaerat nihil possimus soluta sapiente sit, doloribus eaque vero officia sunt hic nesciunt, omnis. Vel optio, illo eveniet inventore. Quisquam aliquid in quod, cum blanditiis libero.</div>
<div>Veritatis architecto pariatur voluptatum ducimus molestias necessitatibus, delectus alias, mollitia ratione, fugiat perspiciatis accusantium rerum sapiente. Maxime nisi harum a recusandae vero ipsum ipsam repellendus, facilis quibusdam, tempore ratione ut.</div>
<div>Enim voluptate nulla consequatur, tenetur quos quaerat suscipit distinctio ex in ipsam molestiae pariatur facere eligendi deleniti explicabo perspiciatis est placeat itaque libero repudiandae facilis. Labore voluptates distinctio reiciendis soluta.</div>
<div>Repudiandae magni et inventore consequatur dolor enim eum officiis mollitia excepturi repellat vel, itaque eius tempora fugiat possimus, deserunt quam. Dolore nostrum accusantium eius quisquam perspiciatis facilis in ipsum, provident.</div>
<div>Veritatis iste iusto molestias quisquam, veniam eveniet reprehenderit quos, in cupiditate eum rerum animi, assumenda, omnis natus voluptas a saepe. Et modi sapiente ipsum aliquid eaque unde, ea, explicabo impedit?</div>
<div>Perferendis earum, dicta labore, nam nisi porro delectus non nihil iste excepturi cumque architecto voluptatum facere, molestias deserunt eaque magnam! A aliquam inventore molestiae? Voluptatem obcaecati voluptas, maiores veritatis voluptate!</div>
<div>Perferendis eum natus praesentium neque provident rem repellat officia nobis, qui, eveniet reiciendis suscipit veritatis itaque mollitia ad asperiores distinctio necessitatibus magni excepturi dolorum officiis in sit corporis. In, quisquam.</div>
<div>Incidunt fuga omnis commodi, facilis adipisci nulla hic. Delectus voluptas consequatur, iste dolor, quos quisquam quae totam provident, ipsam doloremque ea quas similique tenetur odit deleniti, voluptatibus maiores. Fugit, placeat?</div>
<div>Dolores cum obcaecati, magnam vero rerum modi praesentium ad quo minus quaerat placeat, illo voluptas dignissimos quae, id harum velit sequi. Vitae, nobis voluptatibus non! Animi, consectetur, accusantium. Est, assumenda!</div>
<div>Dicta, sint, nulla. Quos, tempore excepturi animi veritatis fugit perferendis eum repellendus commodi a aliquid enim qui doloribus consectetur vel provident rerum ipsum nisi iure adipisci! Dolorem praesentium eveniet voluptas!</div>
<div>Hic beatae reprehenderit dolorum, impedit id rem mollitia, eos obcaecati amet nisi accusantium numquam, voluptatum aliquam, fuga iure rerum. Eos expedita delectus ipsum porro assumenda consequatur repellat a omnis architecto.</div>
<div>Natus veritatis non dolorem vitae, maxime sunt, cupiditate totam quidem, illo sequi, odit eum asperiores? Libero mollitia ad labore maxime eaque, suscipit sapiente natus eum vitae dolore totam nostrum modi?</div>
<div>Facere, voluptatibus reprehenderit voluptate nisi obcaecati magnam quod adipisci ea nam praesentium, ratione veniam rerum dignissimos id omnis suscipit commodi est, natus unde nesciunt tenetur et eveniet. Ducimus quidem, autem?</div>
<div>Sit dolores debitis architecto recusandae dicta ea fugiat, eveniet non. Sapiente cum sunt quasi nihil, sint, ut, beatae saepe vel laboriosam adipisci sed iste temporibus! Porro temporibus error magnam aperiam!</div>
<div>Sequi architecto placeat voluptate excepturi, similique labore illum accusamus perferendis, modi eius fugit aliquam, asperiores libero odio non! Ipsum perferendis, repellendus earum vitae architecto consectetur incidunt nobis possimus libero molestiae.</div>
<div>Sapiente beatae officia, qui maiores eius libero suscipit! Voluptatibus tempora ipsam eum cumque iure magnam dicta amet doloremque. Ex similique officia repudiandae optio non illum perspiciatis fuga harum odit deleniti.</div>
<div>Ducimus sequi esse, nostrum voluptate sit rem exercitationem cum expedita aliquid illum optio dolore cumque temporibus quis mollitia assumenda atque aliquam error deserunt, fugit ratione impedit, similique! Enim, praesentium, voluptate!</div>
<div>Officia culpa, dolorem deleniti obcaecati ullam labore repudiandae eius sapiente totam necessitatibus pariatur expedita aliquid ratione corrupti, consectetur aspernatur adipisci eum dolores, facere. Facilis vel necessitatibus enim nihil eum architecto.</div>
<div>Non aliquid quos, iusto culpa nam maiores molestiae, ratione laudantium adipisci, eum reprehenderit sed excepturi a debitis nihil possimus consequatur tempora, consequuntur incidunt rem! Molestias soluta id debitis ullam illo!</div>
<div>Commodi sit, amet reprehenderit odit praesentium cumque inventore et, debitis repudiandae officia assumenda nisi ratione quos eos. Tempora necessitatibus maiores, dicta. In id hic laborum dolorum minima eius voluptatibus saepe.</div>
<div>Quia eius nemo provident ut fuga expedita blanditiis eligendi accusamus fugit nihil quas excepturi officiis eaque modi possimus, unde adipisci soluta. Tenetur facilis, vero! A ipsa debitis veritatis voluptatibus soluta.</div>
<div>Culpa iste ipsa aut nesciunt sit saepe sunt amet illum nobis repellat delectus, similique tenetur veritatis suscipit voluptate eaque repudiandae voluptates. Voluptate adipisci magnam, accusamus doloribus quos eius, nostrum dolor.</div>
<div>Vel nemo voluptas rerum quis alias libero obcaecati quidem, aut similique ab explicabo quia, dolorum aperiam magni dolore temporibus voluptatum pariatur dicta iste! Ut debitis, voluptatum vero possimus ad culpa!</div>
<div>Laboriosam unde illo voluptates reiciendis est ratione ab deserunt quibusdam, sunt omnis eos exercitationem recusandae inventore consequatur quas atque consequuntur nihil eligendi laborum praesentium. Exercitationem, repellat, autem. Quia, unde, totam.</div>
<div>Delectus laboriosam suscipit iusto magnam veniam voluptatibus obcaecati, esse omnis nesciunt sequi. Quibusdam rerum error accusamus ducimus nemo excepturi eum quae, sequi, sapiente voluptate modi. Ratione quo ea enim quisquam.</div>
<div>Architecto laboriosam perferendis ipsam molestias quaerat numquam eos minima reiciendis eveniet odit praesentium dolorem esse qui vitae harum a, quidem nisi quae, accusamus explicabo quod eligendi ducimus dolores blanditiis error!</div>
<div>Minus nostrum, temporibus ab magni sapiente officiis enim pariatur error itaque saepe quos veniam amet dolor ipsum veritatis eaque dolore non officia cupiditate debitis recusandae blanditiis obcaecati. Aliquam animi, eligendi.</div>
<div>Rem iste, nostrum, atque magni aperiam quia modi quidem qui officiis, quas soluta recusandae cum reprehenderit culpa perspiciatis ipsa dolore. Ab blanditiis saepe dolores ut voluptatem quas minus possimus, nihil.</div>
<div>Cupiditate assumenda, quo doloremque earum voluptatibus voluptates consectetur magni itaque eius ea! Repudiandae, obcaecati, iure. Velit minus harum quam inventore, nihil rerum voluptas veniam obcaecati, totam doloremque beatae dolorum sapiente.</div>
<div>Quisquam qui eos sit accusamus esse inventore consequatur iusto tenetur veniam, minima quae pariatur magnam ab non ipsa aspernatur rem quos, doloribus corporis. Repellendus molestiae, ab minus quaerat, totam reprehenderit.</div>
<div>Neque dolorem necessitatibus cumque perferendis mollitia deleniti, voluptates, hic placeat quam, nesciunt quibusdam accusamus. Sunt, tempora, nobis. Repudiandae modi facilis sequi dolorum, deserunt labore, cupiditate illo hic consequatur temporibus impedit.</div>
<div>Delectus odit magnam officia error placeat voluptatum, quidem quae consequuntur ipsam dolorem dicta nostrum, eaque qui quia amet maxime. Quae consectetur ducimus excepturi distinctio vitae. Quia, facilis obcaecati minima neque?</div>
<div>Dignissimos pariatur veniam molestiae consectetur atque, ipsum voluptas quaerat nesciunt omnis fugit est fuga voluptatibus reiciendis soluta incidunt autem aliquam molestias quidem tempore nam maxime, eaque in accusamus inventore sapiente.</div>
<div>Veritatis nostrum qui recusandae, dignissimos vero. Quam, at, nesciunt? Quaerat commodi, minus quidem sed. Quod dolor, temporibus nesciunt aliquam itaque, odio reprehenderit cum nisi blanditiis, quis ducimus, iste aperiam tenetur?</div>
<div>Eligendi possimus vel similique praesentium est hic nemo blanditiis voluptatibus deleniti sit dicta accusantium quod facere dolor, ea, ipsam, odit a ex debitis quos reprehenderit. Iure veniam a laudantium praesentium!</div>
<div>Voluptas maiores dolorum esse delectus, ratione nam cum eos! Minus reiciendis voluptates quo dolores laudantium, ea iure reprehenderit, delectus ipsa deserunt dolore voluptatem, quasi quod tenetur dignissimos ab eligendi! Vero.</div>
<div>Amet, distinctio. Maxime culpa totam nesciunt harum alias eaque voluptatibus, aut explicabo recusandae reprehenderit. In, recusandae quia repellendus itaque doloribus maiores tempore corporis! Quos nemo itaque ullam, suscipit in unde.</div>
<div>Illo at debitis ipsa consectetur, laudantium harum neque fugiat, eum ducimus sunt odio aliquid cupiditate atque deleniti assumenda facilis. Atque facilis esse nisi, mollitia animi maiores deleniti voluptates optio, doloribus!</div>
<div>Velit quae, consequatur ratione laboriosam expedita sequi est illo sit. At fuga fugit tempora reiciendis omnis laboriosam nostrum aliquid rem architecto veniam cumque, maxime eveniet deleniti temporibus alias. Odit, dolor.</div>
<div>Harum magnam, sint, possimus asperiores cum voluptate, ut ipsum, laudantium a dolore libero aperiam labore. Iure soluta voluptates placeat exercitationem omnis, quibusdam, alias quo iusto nihil tempore fugit iste ipsum.</div>
<div>Ea, excepturi cumque ducimus accusantium facere itaque recusandae ipsam, nulla neque quibusdam quae vero quos vitae? A dignissimos, suscipit consequuntur cum odit vel nulla voluptates consectetur minus accusantium dicta veniam?</div>
<div>Dolores iusto, enim voluptatem dolorum rerum neque explicabo libero aliquam nam odio tempore, sint quas aliquid. Praesentium vero at accusamus esse expedita mollitia ipsum nemo! Explicabo numquam ratione adipisci fuga?</div>
<div>Quasi nesciunt, nobis. Provident quod illo asperiores cumque, aliquid quos repellendus est. Quo ratione, nulla doloremque officiis delectus quod, itaque voluptatum voluptatem nihil in harum quidem facilis ipsa est non.</div>
<div>Mollitia quos nulla consequuntur, corporis doloribus, omnis enim nihil inventore, sunt qui libero labore quisquam iusto accusamus. Nesciunt esse expedita veniam, sequi facilis eaque vero. Temporibus nulla numquam dolores nostrum!</div>
<div>Sed at amet doloribus porro maxime expedita illum quia non molestias, quas consectetur delectus rerum iusto atque voluptates laborum sunt dolorem dicta in! Fugit incidunt vero modi non. Amet, nihil.</div>
<div>Necessitatibus, aliquid ullam. Blanditiis repudiandae, tempora et eaque iste aut, quo voluptate doloremque consectetur ullam nobis animi quisquam ad placeat illum reiciendis nam, corporis porro dolor nemo atque recusandae officia.</div>
<div>Iste possimus nemo illum quia perspiciatis commodi autem dicta praesentium repellendus, laborum obcaecati voluptatibus unde alias tenetur labore voluptates, harum, deleniti dolore! Laboriosam sit, minus iure similique praesentium itaque inventore.</div>
<div>Incidunt vero enim ratione, necessitatibus dolores perferendis aspernatur reiciendis sed, porro nobis voluptates, eum veritatis laborum hic at officiis iure nostrum. Est doloribus quidem quas commodi officiis labore eum vero.</div>
<div>Officia fugiat eum nisi doloribus voluptates laborum ullam ipsa saepe distinctio veritatis nobis cum voluptatibus, eos, accusamus accusantium, cupiditate earum quisquam porro voluptate reiciendis sint, sit! Hic aliquid, tempore vitae.</div>
<div>Sint laboriosam reiciendis dicta cupiditate ducimus adipisci itaque mollitia optio. Recusandae, soluta! Dolorum ex at saepe expedita. Voluptate voluptates officiis aliquam aspernatur, quas quidem quasi quisquam, esse nihil sequi voluptatibus.</div>
<div>Consequuntur in eos, repudiandae dicta pariatur excepturi at doloremque repellat, earum dolores! Perspiciatis autem sapiente quae nisi natus quia culpa quaerat alias cumque, tempore officiis quam distinctio hic nihil error?</div>
<div>Optio asperiores beatae esse maxime, vero facere laboriosam neque accusantium itaque nostrum minima voluptatem cumque possimus nulla hic officia! Sequi in nam rem totam alias aspernatur quasi atque reprehenderit voluptas.</div>
<div>Suscipit, fugit ratione, dolorem maiores, quia quos corporis harum, iste repudiandae nesciunt rem minima quam eligendi. Nostrum facere iusto aliquid deleniti ipsam aperiam nobis, a quis debitis pariatur nam similique.</div>
<div>Commodi provident, illum qui. Inventore maxime ea hic eaque, consequuntur, tempore molestias exercitationem culpa commodi illum quod adipisci ullam cum fugit praesentium accusamus odit porro libero incidunt quasi rem! Vero.</div>
<div>Minus ullam, hic quo, excepturi perspiciatis reprehenderit culpa omnis repudiandae impedit beatae fugiat facilis ea neque fuga aut adipisci consectetur minima tempore deserunt ipsam earum praesentium aperiam est quae! Nemo?</div>
<div>Nemo commodi, laborum doloribus quae distinctio, quasi alias, ex enim saepe vitae illum? Reiciendis temporibus hic, distinctio, eius illo maxime veniam mollitia, consequatur, sunt maiores pariatur. Qui nostrum, eum voluptatem.</div>
<div>Corporis, illum, iusto? Consequatur autem ab adipisci facilis, ipsa maiores deleniti aperiam, explicabo perspiciatis, recusandae iusto minus omnis consectetur non quas ipsum! Tempora ipsa, unde eveniet a doloribus blanditiis reiciendis?</div>
<div>Facilis illum dolore officia aperiam cum quam aut sint quidem alias sequi quisquam voluptatibus, velit quos doloremque voluptas nulla nihil! Amet eum earum pariatur veniam. Quasi, facere, possimus. Itaque, perferendis?</div>
<div>Tempore porro facilis incidunt voluptatem sunt, vitae fugiat eveniet id fugit deserunt. Velit eligendi nobis sequi aspernatur, consectetur, ipsum. Quibusdam mollitia voluptas aut expedita accusamus error quam illum, ipsum possimus.</div>
<div>Magnam id laudantium blanditiis asperiores corrupti eaque, rerum voluptates aliquid voluptate laborum adipisci impedit a, quidem dolorum! Beatae, natus odit, optio quam molestias possimus voluptatibus quia, dolores vel minus dolorem!</div>
<div>Dolore nulla reprehenderit repellat, delectus dolores natus impedit neque accusantium voluptatem ut ipsa nesciunt. Sed sint similique, pariatur modi cupiditate vero, dolor dicta nisi dolore, consectetur recusandae temporibus, rerum commodi.</div>
<div>Vero vel aliquid culpa tempora tempore atque perspiciatis eum quos ea tenetur natus necessitatibus excepturi quia hic maiores autem, modi magni neque officia veritatis. Obcaecati eius, id sit necessitatibus fugiat!</div>
<div>Quos iusto saepe qui atque cumque maiores quas itaque, voluptatem, quisquam similique expedita fuga dolores, eligendi officia soluta ipsum necessitatibus delectus quo excepturi perferendis! Ea necessitatibus eum, dolore nulla debitis!</div>
<div>Repellendus eius necessitatibus provident sapiente quaerat amet enim aspernatur nulla earum, eos rerum eum corporis quisquam vero odio autem aperiam, dolor iusto maxime voluptates aut eligendi unde quod! Perspiciatis, dolorem.</div>
<div>Alias autem quis odit rem, expedita dolor. Laudantium facere nisi error! Maxime aspernatur, minus earum, accusantium odit dignissimos cupiditate dolorem explicabo fuga, provident sapiente qui exercitationem minima, sed totam hic?</div>
<div>Saepe tempora nesciunt nam, perferendis. Incidunt voluptatem pariatur neque numquam, nobis, distinctio accusantium recusandae, provident veritatis praesentium quibusdam maxime molestiae hic consequatur. Expedita sequi, quibusdam culpa laborum ex asperiores distinctio.</div>
<div>Quam totam optio sunt quibusdam pariatur sint nihil neque, laboriosam. Rerum temporibus optio nostrum libero excepturi, totam aliquid iure unde, voluptatem iusto rem, explicabo nihil dignissimos. Pariatur itaque suscipit perspiciatis.</div>
<div>Deleniti a esse ipsam quis voluptas enim facilis ipsum dolore asperiores laudantium accusamus molestias, quibusdam sunt nesciunt facere laborum rem est veritatis sint hic cum officia ipsa! Delectus, explicabo, dolorum?</div>
<div>Corrupti blanditiis ullam tenetur culpa perspiciatis! Culpa architecto, dolorem nobis ut assumenda deserunt doloremque magni laudantium, illo velit pariatur explicabo vel repellendus commodi voluptates eum quae obcaecati at vero mollitia!</div>
<div>Cumque cupiditate amet, tempore ab aut totam neque saepe, reiciendis iusto asperiores et quibusdam doloribus architecto, illum sint iste. Deleniti aperiam, alias doloremque aliquid temporibus tenetur, debitis culpa asperiores quod?</div>
<div>Libero necessitatibus ipsa, atque velit facilis sapiente fugiat dolor consectetur placeat eos aliquam inventore culpa corporis, vero reprehenderit perferendis. Aliquam quibusdam repellat, in atque ut repellendus soluta maiores! Quod, totam.</div>
<div>Vitae eius, ut. Quod nesciunt fugit dignissimos sapiente hic ipsum, quo sunt dolore placeat labore amet quae iste necessitatibus repudiandae! Vero incidunt hic adipisci alias ipsam odio error inventore deleniti.</div>
<div>Nemo facere quae architecto quos sunt odio atque, beatae, officia alias perspiciatis in sed ea, sapiente soluta iusto exercitationem quisquam eum repudiandae. Sint laudantium sequi incidunt ex tempore, quis velit.</div>
<div>Facilis quos non placeat tenetur. Dolore vero doloremque cum repellat expedita perspiciatis voluptate consectetur nisi sint libero, quasi facere, est sit laborum nihil soluta quae deserunt, maiores ipsam in. Optio.</div>
<div>Quisquam at esse illum, neque. Quaerat, nostrum nam nisi deleniti, iure rem voluptas quam dolorem magnam temporibus fuga maxime corporis. Excepturi nemo pariatur ratione. Neque cum totam inventore odio tempore!</div>
<div>Maiores debitis beatae praesentium, labore facere suscipit explicabo. Doloremque vel dolor, error rem quisquam at repellendus numquam, cum dolore eos recusandae fuga, eligendi minus quo placeat expedita! Aliquam, nulla nobis.</div>
<div>Aliquid vero molestiae facere mollitia officia labore, culpa necessitatibus fugiat quae quasi ex eum, pariatur similique laboriosam, libero voluptatibus placeat? Quae impedit eum sapiente dolores tempore dolor dicta officiis saepe!</div>
<div>Dolor inventore quam in soluta non nulla veniam, doloribus consequuntur, veritatis quisquam expedita, autem temporibus sint aspernatur similique assumenda alias nam obcaecati molestias quis possimus dolore laboriosam rerum ut. Nostrum!</div>
<div>Nulla inventore nobis eius. Sit quidem nostrum repellendus qui voluptatibus, quasi odit doloribus vero perspiciatis explicabo, ut itaque quibusdam tempore iure neque architecto similique error inventore quis soluta nulla tenetur.</div>
<div>Nihil est earum aspernatur iusto natus similique velit inventore quasi animi aperiam cum labore magnam ex aut doloribus, accusamus sint fugit laudantium, repudiandae. Quo possimus, voluptates aperiam illo ratione adipisci.</div>
<div>Voluptas corrupti ducimus iure distinctio nulla rerum quia quisquam impedit fuga odit alias accusantium animi possimus harum id neque, ipsa autem. Ullam officiis qui mollitia unde labore sed, natus illum!</div>
<div>Eos facere dolorum ab natus reiciendis, non architecto quas iusto earum quasi corrupti nesciunt dolore hic laudantium placeat aut magnam? Esse natus explicabo necessitatibus beatae neque sapiente vitae maxime eos.</div>
<div>Voluptate, voluptatum! At, obcaecati blanditiis qui expedita. Dolorem commodi obcaecati porro dolorum ut animi necessitatibus debitis neque, ipsam iure eligendi. Dolore eligendi accusamus, recusandae quibusdam corrupti hic laudantium similique magnam.</div>
<div>Quas amet veniam cupiditate inventore tempore aut at neque modi veritatis nemo, sunt hic impedit beatae facilis commodi repellendus ratione fugit consectetur nisi magnam necessitatibus. Recusandae, magni deserunt corporis aut.</div>
<div>Fugit magnam odio officia tempora asperiores laudantium nam beatae, a iste corrupti recusandae, consectetur possimus at! Ipsa, saepe, numquam. Atque aspernatur ex reprehenderit eos quis nulla explicabo quae impedit odit?</div>
<div>Dolores asperiores, recusandae minima nobis, animi molestiae. Iusto tempora unde saepe corporis tenetur harum numquam eum repellendus atque officia cumque ut eos, laborum at quasi iste, recusandae quaerat deserunt suscipit.</div>
<div>Ducimus recusandae, dolores ipsam, quos rerum facere! Quae deserunt iste corporis earum harum at quis, nobis dolorem necessitatibus ad odio, ea doloribus doloremque aperiam blanditiis maxime porro, voluptatibus. Culpa, iusto.</div>
<div>Corporis eos nam culpa minus dolor. Nihil, atque beatae cum quod fugit placeat porro, dolorem quos. Obcaecati quae blanditiis ratione sit reiciendis architecto iusto voluptatibus, tenetur porro nam! Quasi, id.</div>
<div>Nihil at vitae sequi eum nesciunt rem praesentium incidunt aliquam omnis sint molestiae eius, eos quod iure fugit quis odio adipisci id mollitia laborum voluptatibus fuga quas expedita. Voluptatibus, omnis.</div>
</div>
</div>
</body>
</html>
mainStyle.css
* {
box-sizing: border-box;
}
#header {
position: fixed;
left: 0px;
top: 0px;
background: blue;
width: 100%;
height: 100px;
margin: 0;
padding: 0;
border: 0;
}
#leftbar {
position: fixed;
margin: 0;
padding: 0;
border: 0;
left: 0px;
top: 100px;
background: green;
width: 100px;
height: 100%;
}
#mainContainer {
position: fixed;
left: 100px;
top: 100px;
padding: 0;
border: 0;
margin: 0;
background: red;
width: 100%;
height: 100%;
overflow: auto;
}
#mainContent {
display: block;
width: calc(100%-30px);
padding: 30px;
background: white;
overflow: auto;
}
One thing I tried playing with is to make the position of the mainContent relative, didn't change anything.
I tried making the position of mainContainer relative and this put a scroll bar on the element, but then when it scrolls up the main content covers the fixed position header.
I tried it with the mainContainer having width 100% but found a StackOverflow question which guided me to trying the calculation above.
I searched for other indications of what might be causing this but can't find any more leads.
The problem lies with the fact your container has position:fixed and width:100%.
Which gives it the same size of <body>, but it should really have the width of the left column deducted (and same goes for height - deduct the header):
#mainContainer {
width: calc(100% - 100px);
height: calc(100% - 100px);
}
* {
box-sizing: border-box;
}
#header {
position: fixed;
left: 0px;
top: 0px;
background: blue;
width: 100%;
height: 100px;
margin: 0;
padding: 0;
border: 0;
}
#leftbar {
position: fixed;
margin: 0;
padding: 0;
border: 0;
left: 0px;
top: 100px;
background: green;
width: 100px;
height: 100%;
}
#mainContainer {
position: fixed;
left: 100px;
top: 100px;
padding: 0;
border: 0;
margin: 0;
background: red;
width: calc(100% - 100px);
height: calc(100% - 100px);
overflow: auto;
}
#mainContent {
display: block;
width: calc(100% - 30px);
padding: 30px;
background: white;
overflow: auto;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="mainStyle.css">
<title></title>
</head>
<body>
<div id="header">
<h1>Random header text</h1>
</div>
<div id="leftbar">
Leftbar text.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In numquam, fuga ipsam dolorum recusandae sed, quisquam accusamus provident autem repudiandae praesentium soluta ad. Beatae voluptatem voluptates dolorum id placeat laudantium.
</div>
<div id="mainContainer">
<div id="mainContent">
Initial text.
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta aliquid, nihil tempora, ex repellendus neque fugiat veniam voluptatibus quae vel dolores culpa, labore doloremque inventore vitae quam fuga velit esse!</div>
<div>Molestiae saepe id asperiores harum porro iure dolores illo, ducimus itaque esse culpa repellat, deleniti, doloremque inventore fugiat, amet explicabo rem. In dolorum aliquid dolore consectetur modi, maxime voluptas nisi.</div>
<div>Error veritatis dolorum numquam iure hic recusandae aspernatur ex incidunt corporis quam, praesentium modi consequatur maxime quidem minima asperiores voluptatem accusantium atque? Autem saepe non debitis voluptate maiores at, sequi?</div>
<div>Facere repudiandae nemo quod perferendis obcaecati officiis quis rem consectetur eligendi at necessitatibus incidunt reiciendis ad cum accusantium doloremque praesentium dolorem nobis veniam explicabo cumque error iste laudantium, quo. Impedit.</div>
<div>Esse earum voluptatum, libero tempore ad iure qui numquam iusto illo dignissimos quia quam laboriosam enim sapiente reprehenderit quod saepe provident consequatur molestiae ducimus, a accusamus dolores! Ea, officiis, esse!</div>
<div>Fugiat reiciendis, recusandae quaerat deleniti rem fuga magnam ut earum aliquam esse veritatis at omnis culpa reprehenderit praesentium alias? Vitae inventore tenetur pariatur cupiditate, cum, ratione aspernatur suscipit reprehenderit nihil!</div>
<div>Earum aliquid beatae qui! Facilis ipsum quos reprehenderit, architecto eveniet tempore ratione fuga voluptatum asperiores. Quia expedita quod vel totam velit dolorum placeat doloremque ab ipsa eius, dicta. Quam, eius!</div>
<div>Tenetur impedit dolores consectetur deleniti doloribus, et ea quam cumque reiciendis fuga iusto vel, facere libero praesentium fugit alias sed ipsam dolor autem minus, saepe velit totam inventore? A, illo.</div>
<div>Doloribus tempora non perspiciatis nobis pariatur quisquam deleniti, maxime voluptatem eum qui commodi, ducimus vel aut, unde corrupti libero, maiores sed perferendis nemo sequi? Repellat facilis rerum ut perferendis dolore.</div>
<div>Blanditiis fugiat, veniam, repellendus quaerat ea voluptatibus, aspernatur voluptate ratione, in odit a. Aliquam quae modi debitis, voluptatum neque suscipit vel minus odio vero quibusdam earum nesciunt magni obcaecati fugit.</div>
<div>Iure sed vel nostrum laudantium eligendi at quia, eaque numquam doloremque. Itaque cum reprehenderit quaerat nobis asperiores sed eum similique voluptatibus tempore necessitatibus porro doloremque, omnis molestiae cumque ipsam id.</div>
<div>Omnis, dolorum, molestiae. Iusto quaerat nihil possimus soluta sapiente sit, doloribus eaque vero officia sunt hic nesciunt, omnis. Vel optio, illo eveniet inventore. Quisquam aliquid in quod, cum blanditiis libero.</div>
<div>Veritatis architecto pariatur voluptatum ducimus molestias necessitatibus, delectus alias, mollitia ratione, fugiat perspiciatis accusantium rerum sapiente. Maxime nisi harum a recusandae vero ipsum ipsam repellendus, facilis quibusdam, tempore ratione ut.</div>
<div>Enim voluptate nulla consequatur, tenetur quos quaerat suscipit distinctio ex in ipsam molestiae pariatur facere eligendi deleniti explicabo perspiciatis est placeat itaque libero repudiandae facilis. Labore voluptates distinctio reiciendis soluta.</div>
<div>Repudiandae magni et inventore consequatur dolor enim eum officiis mollitia excepturi repellat vel, itaque eius tempora fugiat possimus, deserunt quam. Dolore nostrum accusantium eius quisquam perspiciatis facilis in ipsum, provident.</div>
<div>Veritatis iste iusto molestias quisquam, veniam eveniet reprehenderit quos, in cupiditate eum rerum animi, assumenda, omnis natus voluptas a saepe. Et modi sapiente ipsum aliquid eaque unde, ea, explicabo impedit?</div>
<div>Perferendis earum, dicta labore, nam nisi porro delectus non nihil iste excepturi cumque architecto voluptatum facere, molestias deserunt eaque magnam! A aliquam inventore molestiae? Voluptatem obcaecati voluptas, maiores veritatis voluptate!</div>
<div>Perferendis eum natus praesentium neque provident rem repellat officia nobis, qui, eveniet reiciendis suscipit veritatis itaque mollitia ad asperiores distinctio necessitatibus magni excepturi dolorum officiis in sit corporis. In, quisquam.</div>
<div>Incidunt fuga omnis commodi, facilis adipisci nulla hic. Delectus voluptas consequatur, iste dolor, quos quisquam quae totam provident, ipsam doloremque ea quas similique tenetur odit deleniti, voluptatibus maiores. Fugit, placeat?</div>
<div>Dolores cum obcaecati, magnam vero rerum modi praesentium ad quo minus quaerat placeat, illo voluptas dignissimos quae, id harum velit sequi. Vitae, nobis voluptatibus non! Animi, consectetur, accusantium. Est, assumenda!</div>
<div>Dicta, sint, nulla. Quos, tempore excepturi animi veritatis fugit perferendis eum repellendus commodi a aliquid enim qui doloribus consectetur vel provident rerum ipsum nisi iure adipisci! Dolorem praesentium eveniet voluptas!</div>
<div>Hic beatae reprehenderit dolorum, impedit id rem mollitia, eos obcaecati amet nisi accusantium numquam, voluptatum aliquam, fuga iure rerum. Eos expedita delectus ipsum porro assumenda consequatur repellat a omnis architecto.</div>
<div>Natus veritatis non dolorem vitae, maxime sunt, cupiditate totam quidem, illo sequi, odit eum asperiores? Libero mollitia ad labore maxime eaque, suscipit sapiente natus eum vitae dolore totam nostrum modi?</div>
<div>Facere, voluptatibus reprehenderit voluptate nisi obcaecati magnam quod adipisci ea nam praesentium, ratione veniam rerum dignissimos id omnis suscipit commodi est, natus unde nesciunt tenetur et eveniet. Ducimus quidem, autem?</div>
<div>Sit dolores debitis architecto recusandae dicta ea fugiat, eveniet non. Sapiente cum sunt quasi nihil, sint, ut, beatae saepe vel laboriosam adipisci sed iste temporibus! Porro temporibus error magnam aperiam!</div>
<div>Sequi architecto placeat voluptate excepturi, similique labore illum accusamus perferendis, modi eius fugit aliquam, asperiores libero odio non! Ipsum perferendis, repellendus earum vitae architecto consectetur incidunt nobis possimus libero molestiae.</div>
<div>Sapiente beatae officia, qui maiores eius libero suscipit! Voluptatibus tempora ipsam eum cumque iure magnam dicta amet doloremque. Ex similique officia repudiandae optio non illum perspiciatis fuga harum odit deleniti.</div>
<div>Ducimus sequi esse, nostrum voluptate sit rem exercitationem cum expedita aliquid illum optio dolore cumque temporibus quis mollitia assumenda atque aliquam error deserunt, fugit ratione impedit, similique! Enim, praesentium, voluptate!</div>
<div>Officia culpa, dolorem deleniti obcaecati ullam labore repudiandae eius sapiente totam necessitatibus pariatur expedita aliquid ratione corrupti, consectetur aspernatur adipisci eum dolores, facere. Facilis vel necessitatibus enim nihil eum architecto.</div>
<div>Non aliquid quos, iusto culpa nam maiores molestiae, ratione laudantium adipisci, eum reprehenderit sed excepturi a debitis nihil possimus consequatur tempora, consequuntur incidunt rem! Molestias soluta id debitis ullam illo!</div>
<div>Commodi sit, amet reprehenderit odit praesentium cumque inventore et, debitis repudiandae officia assumenda nisi ratione quos eos. Tempora necessitatibus maiores, dicta. In id hic laborum dolorum minima eius voluptatibus saepe.</div>
<div>Quia eius nemo provident ut fuga expedita blanditiis eligendi accusamus fugit nihil quas excepturi officiis eaque modi possimus, unde adipisci soluta. Tenetur facilis, vero! A ipsa debitis veritatis voluptatibus soluta.</div>
<div>Culpa iste ipsa aut nesciunt sit saepe sunt amet illum nobis repellat delectus, similique tenetur veritatis suscipit voluptate eaque repudiandae voluptates. Voluptate adipisci magnam, accusamus doloribus quos eius, nostrum dolor.</div>
<div>Vel nemo voluptas rerum quis alias libero obcaecati quidem, aut similique ab explicabo quia, dolorum aperiam magni dolore temporibus voluptatum pariatur dicta iste! Ut debitis, voluptatum vero possimus ad culpa!</div>
<div>Laboriosam unde illo voluptates reiciendis est ratione ab deserunt quibusdam, sunt omnis eos exercitationem recusandae inventore consequatur quas atque consequuntur nihil eligendi laborum praesentium. Exercitationem, repellat, autem. Quia, unde, totam.</div>
<div>Delectus laboriosam suscipit iusto magnam veniam voluptatibus obcaecati, esse omnis nesciunt sequi. Quibusdam rerum error accusamus ducimus nemo excepturi eum quae, sequi, sapiente voluptate modi. Ratione quo ea enim quisquam.</div>
<div>Architecto laboriosam perferendis ipsam molestias quaerat numquam eos minima reiciendis eveniet odit praesentium dolorem esse qui vitae harum a, quidem nisi quae, accusamus explicabo quod eligendi ducimus dolores blanditiis error!</div>
<div>Minus nostrum, temporibus ab magni sapiente officiis enim pariatur error itaque saepe quos veniam amet dolor ipsum veritatis eaque dolore non officia cupiditate debitis recusandae blanditiis obcaecati. Aliquam animi, eligendi.</div>
<div>Rem iste, nostrum, atque magni aperiam quia modi quidem qui officiis, quas soluta recusandae cum reprehenderit culpa perspiciatis ipsa dolore. Ab blanditiis saepe dolores ut voluptatem quas minus possimus, nihil.</div>
<div>Cupiditate assumenda, quo doloremque earum voluptatibus voluptates consectetur magni itaque eius ea! Repudiandae, obcaecati, iure. Velit minus harum quam inventore, nihil rerum voluptas veniam obcaecati, totam doloremque beatae dolorum sapiente.</div>
<div>Quisquam qui eos sit accusamus esse inventore consequatur iusto tenetur veniam, minima quae pariatur magnam ab non ipsa aspernatur rem quos, doloribus corporis. Repellendus molestiae, ab minus quaerat, totam reprehenderit.</div>
<div>Neque dolorem necessitatibus cumque perferendis mollitia deleniti, voluptates, hic placeat quam, nesciunt quibusdam accusamus. Sunt, tempora, nobis. Repudiandae modi facilis sequi dolorum, deserunt labore, cupiditate illo hic consequatur temporibus impedit.</div>
<div>Delectus odit magnam officia error placeat voluptatum, quidem quae consequuntur ipsam dolorem dicta nostrum, eaque qui quia amet maxime. Quae consectetur ducimus excepturi distinctio vitae. Quia, facilis obcaecati minima neque?</div>
<div>Dignissimos pariatur veniam molestiae consectetur atque, ipsum voluptas quaerat nesciunt omnis fugit est fuga voluptatibus reiciendis soluta incidunt autem aliquam molestias quidem tempore nam maxime, eaque in accusamus inventore sapiente.</div>
<div>Veritatis nostrum qui recusandae, dignissimos vero. Quam, at, nesciunt? Quaerat commodi, minus quidem sed. Quod dolor, temporibus nesciunt aliquam itaque, odio reprehenderit cum nisi blanditiis, quis ducimus, iste aperiam tenetur?</div>
<div>Eligendi possimus vel similique praesentium est hic nemo blanditiis voluptatibus deleniti sit dicta accusantium quod facere dolor, ea, ipsam, odit a ex debitis quos reprehenderit. Iure veniam a laudantium praesentium!</div>
<div>Voluptas maiores dolorum esse delectus, ratione nam cum eos! Minus reiciendis voluptates quo dolores laudantium, ea iure reprehenderit, delectus ipsa deserunt dolore voluptatem, quasi quod tenetur dignissimos ab eligendi! Vero.</div>
<div>Amet, distinctio. Maxime culpa totam nesciunt harum alias eaque voluptatibus, aut explicabo recusandae reprehenderit. In, recusandae quia repellendus itaque doloribus maiores tempore corporis! Quos nemo itaque ullam, suscipit in unde.</div>
<div>Illo at debitis ipsa consectetur, laudantium harum neque fugiat, eum ducimus sunt odio aliquid cupiditate atque deleniti assumenda facilis. Atque facilis esse nisi, mollitia animi maiores deleniti voluptates optio, doloribus!</div>
<div>Velit quae, consequatur ratione laboriosam expedita sequi est illo sit. At fuga fugit tempora reiciendis omnis laboriosam nostrum aliquid rem architecto veniam cumque, maxime eveniet deleniti temporibus alias. Odit, dolor.</div>
<div>Harum magnam, sint, possimus asperiores cum voluptate, ut ipsum, laudantium a dolore libero aperiam labore. Iure soluta voluptates placeat exercitationem omnis, quibusdam, alias quo iusto nihil tempore fugit iste ipsum.</div>
<div>Ea, excepturi cumque ducimus accusantium facere itaque recusandae ipsam, nulla neque quibusdam quae vero quos vitae? A dignissimos, suscipit consequuntur cum odit vel nulla voluptates consectetur minus accusantium dicta veniam?</div>
<div>Dolores iusto, enim voluptatem dolorum rerum neque explicabo libero aliquam nam odio tempore, sint quas aliquid. Praesentium vero at accusamus esse expedita mollitia ipsum nemo! Explicabo numquam ratione adipisci fuga?</div>
<div>Quasi nesciunt, nobis. Provident quod illo asperiores cumque, aliquid quos repellendus est. Quo ratione, nulla doloremque officiis delectus quod, itaque voluptatum voluptatem nihil in harum quidem facilis ipsa est non.</div>
<div>Mollitia quos nulla consequuntur, corporis doloribus, omnis enim nihil inventore, sunt qui libero labore quisquam iusto accusamus. Nesciunt esse expedita veniam, sequi facilis eaque vero. Temporibus nulla numquam dolores nostrum!</div>
<div>Sed at amet doloribus porro maxime expedita illum quia non molestias, quas consectetur delectus rerum iusto atque voluptates laborum sunt dolorem dicta in! Fugit incidunt vero modi non. Amet, nihil.</div>
<div>Necessitatibus, aliquid ullam. Blanditiis repudiandae, tempora et eaque iste aut, quo voluptate doloremque consectetur ullam nobis animi quisquam ad placeat illum reiciendis nam, corporis porro dolor nemo atque recusandae officia.</div>
<div>Iste possimus nemo illum quia perspiciatis commodi autem dicta praesentium repellendus, laborum obcaecati voluptatibus unde alias tenetur labore voluptates, harum, deleniti dolore! Laboriosam sit, minus iure similique praesentium itaque inventore.</div>
<div>Incidunt vero enim ratione, necessitatibus dolores perferendis aspernatur reiciendis sed, porro nobis voluptates, eum veritatis laborum hic at officiis iure nostrum. Est doloribus quidem quas commodi officiis labore eum vero.</div>
<div>Officia fugiat eum nisi doloribus voluptates laborum ullam ipsa saepe distinctio veritatis nobis cum voluptatibus, eos, accusamus accusantium, cupiditate earum quisquam porro voluptate reiciendis sint, sit! Hic aliquid, tempore vitae.</div>
<div>Sint laboriosam reiciendis dicta cupiditate ducimus adipisci itaque mollitia optio. Recusandae, soluta! Dolorum ex at saepe expedita. Voluptate voluptates officiis aliquam aspernatur, quas quidem quasi quisquam, esse nihil sequi voluptatibus.</div>
<div>Consequuntur in eos, repudiandae dicta pariatur excepturi at doloremque repellat, earum dolores! Perspiciatis autem sapiente quae nisi natus quia culpa quaerat alias cumque, tempore officiis quam distinctio hic nihil error?</div>
<div>Optio asperiores beatae esse maxime, vero facere laboriosam neque accusantium itaque nostrum minima voluptatem cumque possimus nulla hic officia! Sequi in nam rem totam alias aspernatur quasi atque reprehenderit voluptas.</div>
<div>Suscipit, fugit ratione, dolorem maiores, quia quos corporis harum, iste repudiandae nesciunt rem minima quam eligendi. Nostrum facere iusto aliquid deleniti ipsam aperiam nobis, a quis debitis pariatur nam similique.</div>
<div>Commodi provident, illum qui. Inventore maxime ea hic eaque, consequuntur, tempore molestias exercitationem culpa commodi illum quod adipisci ullam cum fugit praesentium accusamus odit porro libero incidunt quasi rem! Vero.</div>
<div>Minus ullam, hic quo, excepturi perspiciatis reprehenderit culpa omnis repudiandae impedit beatae fugiat facilis ea neque fuga aut adipisci consectetur minima tempore deserunt ipsam earum praesentium aperiam est quae! Nemo?</div>
<div>Nemo commodi, laborum doloribus quae distinctio, quasi alias, ex enim saepe vitae illum? Reiciendis temporibus hic, distinctio, eius illo maxime veniam mollitia, consequatur, sunt maiores pariatur. Qui nostrum, eum voluptatem.</div>
<div>Corporis, illum, iusto? Consequatur autem ab adipisci facilis, ipsa maiores deleniti aperiam, explicabo perspiciatis, recusandae iusto minus omnis consectetur non quas ipsum! Tempora ipsa, unde eveniet a doloribus blanditiis reiciendis?</div>
<div>Facilis illum dolore officia aperiam cum quam aut sint quidem alias sequi quisquam voluptatibus, velit quos doloremque voluptas nulla nihil! Amet eum earum pariatur veniam. Quasi, facere, possimus. Itaque, perferendis?</div>
<div>Tempore porro facilis incidunt voluptatem sunt, vitae fugiat eveniet id fugit deserunt. Velit eligendi nobis sequi aspernatur, consectetur, ipsum. Quibusdam mollitia voluptas aut expedita accusamus error quam illum, ipsum possimus.</div>
<div>Magnam id laudantium blanditiis asperiores corrupti eaque, rerum voluptates aliquid voluptate laborum adipisci impedit a, quidem dolorum! Beatae, natus odit, optio quam molestias possimus voluptatibus quia, dolores vel minus dolorem!</div>
<div>Dolore nulla reprehenderit repellat, delectus dolores natus impedit neque accusantium voluptatem ut ipsa nesciunt. Sed sint similique, pariatur modi cupiditate vero, dolor dicta nisi dolore, consectetur recusandae temporibus, rerum commodi.</div>
<div>Vero vel aliquid culpa tempora tempore atque perspiciatis eum quos ea tenetur natus necessitatibus excepturi quia hic maiores autem, modi magni neque officia veritatis. Obcaecati eius, id sit necessitatibus fugiat!</div>
<div>Quos iusto saepe qui atque cumque maiores quas itaque, voluptatem, quisquam similique expedita fuga dolores, eligendi officia soluta ipsum necessitatibus delectus quo excepturi perferendis! Ea necessitatibus eum, dolore nulla debitis!</div>
<div>Repellendus eius necessitatibus provident sapiente quaerat amet enim aspernatur nulla earum, eos rerum eum corporis quisquam vero odio autem aperiam, dolor iusto maxime voluptates aut eligendi unde quod! Perspiciatis, dolorem.</div>
<div>Alias autem quis odit rem, expedita dolor. Laudantium facere nisi error! Maxime aspernatur, minus earum, accusantium odit dignissimos cupiditate dolorem explicabo fuga, provident sapiente qui exercitationem minima, sed totam hic?</div>
<div>Saepe tempora nesciunt nam, perferendis. Incidunt voluptatem pariatur neque numquam, nobis, distinctio accusantium recusandae, provident veritatis praesentium quibusdam maxime molestiae hic consequatur. Expedita sequi, quibusdam culpa laborum ex asperiores distinctio.</div>
<div>Quam totam optio sunt quibusdam pariatur sint nihil neque, laboriosam. Rerum temporibus optio nostrum libero excepturi, totam aliquid iure unde, voluptatem iusto rem, explicabo nihil dignissimos. Pariatur itaque suscipit perspiciatis.</div>
<div>Deleniti a esse ipsam quis voluptas enim facilis ipsum dolore asperiores laudantium accusamus molestias, quibusdam sunt nesciunt facere laborum rem est veritatis sint hic cum officia ipsa! Delectus, explicabo, dolorum?</div>
<div>Corrupti blanditiis ullam tenetur culpa perspiciatis! Culpa architecto, dolorem nobis ut assumenda deserunt doloremque magni laudantium, illo velit pariatur explicabo vel repellendus commodi voluptates eum quae obcaecati at vero mollitia!</div>
<div>Cumque cupiditate amet, tempore ab aut totam neque saepe, reiciendis iusto asperiores et quibusdam doloribus architecto, illum sint iste. Deleniti aperiam, alias doloremque aliquid temporibus tenetur, debitis culpa asperiores quod?</div>
<div>Libero necessitatibus ipsa, atque velit facilis sapiente fugiat dolor consectetur placeat eos aliquam inventore culpa corporis, vero reprehenderit perferendis. Aliquam quibusdam repellat, in atque ut repellendus soluta maiores! Quod, totam.</div>
<div>Vitae eius, ut. Quod nesciunt fugit dignissimos sapiente hic ipsum, quo sunt dolore placeat labore amet quae iste necessitatibus repudiandae! Vero incidunt hic adipisci alias ipsam odio error inventore deleniti.</div>
<div>Nemo facere quae architecto quos sunt odio atque, beatae, officia alias perspiciatis in sed ea, sapiente soluta iusto exercitationem quisquam eum repudiandae. Sint laudantium sequi incidunt ex tempore, quis velit.</div>
<div>Facilis quos non placeat tenetur. Dolore vero doloremque cum repellat expedita perspiciatis voluptate consectetur nisi sint libero, quasi facere, est sit laborum nihil soluta quae deserunt, maiores ipsam in. Optio.</div>
<div>Quisquam at esse illum, neque. Quaerat, nostrum nam nisi deleniti, iure rem voluptas quam dolorem magnam temporibus fuga maxime corporis. Excepturi nemo pariatur ratione. Neque cum totam inventore odio tempore!</div>
<div>Maiores debitis beatae praesentium, labore facere suscipit explicabo. Doloremque vel dolor, error rem quisquam at repellendus numquam, cum dolore eos recusandae fuga, eligendi minus quo placeat expedita! Aliquam, nulla nobis.</div>
<div>Aliquid vero molestiae facere mollitia officia labore, culpa necessitatibus fugiat quae quasi ex eum, pariatur similique laboriosam, libero voluptatibus placeat? Quae impedit eum sapiente dolores tempore dolor dicta officiis saepe!</div>
<div>Dolor inventore quam in soluta non nulla veniam, doloribus consequuntur, veritatis quisquam expedita, autem temporibus sint aspernatur similique assumenda alias nam obcaecati molestias quis possimus dolore laboriosam rerum ut. Nostrum!</div>
<div>Nulla inventore nobis eius. Sit quidem nostrum repellendus qui voluptatibus, quasi odit doloribus vero perspiciatis explicabo, ut itaque quibusdam tempore iure neque architecto similique error inventore quis soluta nulla tenetur.</div>
<div>Nihil est earum aspernatur iusto natus similique velit inventore quasi animi aperiam cum labore magnam ex aut doloribus, accusamus sint fugit laudantium, repudiandae. Quo possimus, voluptates aperiam illo ratione adipisci.</div>
<div>Voluptas corrupti ducimus iure distinctio nulla rerum quia quisquam impedit fuga odit alias accusantium animi possimus harum id neque, ipsa autem. Ullam officiis qui mollitia unde labore sed, natus illum!</div>
<div>Eos facere dolorum ab natus reiciendis, non architecto quas iusto earum quasi corrupti nesciunt dolore hic laudantium placeat aut magnam? Esse natus explicabo necessitatibus beatae neque sapiente vitae maxime eos.</div>
<div>Voluptate, voluptatum! At, obcaecati blanditiis qui expedita. Dolorem commodi obcaecati porro dolorum ut animi necessitatibus debitis neque, ipsam iure eligendi. Dolore eligendi accusamus, recusandae quibusdam corrupti hic laudantium similique magnam.</div>
<div>Quas amet veniam cupiditate inventore tempore aut at neque modi veritatis nemo, sunt hic impedit beatae facilis commodi repellendus ratione fugit consectetur nisi magnam necessitatibus. Recusandae, magni deserunt corporis aut.</div>
<div>Fugit magnam odio officia tempora asperiores laudantium nam beatae, a iste corrupti recusandae, consectetur possimus at! Ipsa, saepe, numquam. Atque aspernatur ex reprehenderit eos quis nulla explicabo quae impedit odit?</div>
<div>Dolores asperiores, recusandae minima nobis, animi molestiae. Iusto tempora unde saepe corporis tenetur harum numquam eum repellendus atque officia cumque ut eos, laborum at quasi iste, recusandae quaerat deserunt suscipit.</div>
<div>Ducimus recusandae, dolores ipsam, quos rerum facere! Quae deserunt iste corporis earum harum at quis, nobis dolorem necessitatibus ad odio, ea doloribus doloremque aperiam blanditiis maxime porro, voluptatibus. Culpa, iusto.</div>
<div>Corporis eos nam culpa minus dolor. Nihil, atque beatae cum quod fugit placeat porro, dolorem quos. Obcaecati quae blanditiis ratione sit reiciendis architecto iusto voluptatibus, tenetur porro nam! Quasi, id.</div>
<div>Nihil at vitae sequi eum nesciunt rem praesentium incidunt aliquam omnis sint molestiae eius, eos quod iure fugit quis odio adipisci id mollitia laborum voluptatibus fuga quas expedita. Voluptatibus, omnis.</div>
</div>
</div>
</body>
</html>
Also note the correct syntax of calc requires whitespace around + and - operators
(I've noticed a calc(100-30px) in your code, which won't work).
The overflow is hiding it. The #mainContainer is "pushing" the #mainContent to the right.
You have to change the #mainContainer width.
If you set width: 90%, for example, you'll be able to see the scroll bar that has been hidden on the right.
I am not trying to make either Adaptive or Responsive Design. I am aware that there is a way to shrink the entire size of container but I am not sure how I would do it. I would really appreciate any tips and advice on how it gets done.
This is what I am trying to achieve.
http://images.nationalgeographic.com/wpf/media-content/richmedia/1/1143/project/dist/desktop.html
Before shrinking the browser
after shrinking the browser
Here is my application
Before shrinking the browser
After shrinking the browser. As you can see, it creates a horizontal scroll bar and hides the content while the above application shrinks
Here is my css code for wrapper
#entire_container {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
justify-content: center;
text-align: center;
margin:auto;
width:1366px;
height:810px;
border:3px dotted transparent;
border-image: url(SVG/Intro.svg)round 50;
overflow:hidden;
}
After setting max-width, this happens :( I also tried setting max-width for all other elements but I don't think that is what I should be doing?
#entire_container {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
justify-content: center;
text-align: center;
margin: auto;
width: 96%;
max-width: 1366px;
height: 810px;
border: 3px dotted transparent;
border-image: url(SVG/Intro.svg)round 50;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="entire_container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quia tempora iste repellat illum, soluta facilis debitis dolorem porro ad possimus accusantium asperiores delectus quam, et magni eos omnis vitae eaque accusamus, facere aspernatur ducimus.
Provident doloremque nisi voluptatum omnis vel sit odio ut excepturi, repellat cumque voluptatibus ratione officia explicabo at sequi eaque modi doloribus accusantium. Dicta temporibus delectus eius nam aspernatur, excepturi corporis eveniet commodi,
qui ut reprehenderit itaque error a necessitatibus vel, libero recusandae aliquam odio voluptatem sapiente. Commodi dignissimos molestias, ut vitae dolor corrupti nobis ipsum illum, eos impedit magni quisquam! Cum fuga nisi, officia vitae quaerat
doloremque reiciendis magni voluptas repellat neque quae explicabo saepe optio voluptatem nesciunt eligendi. Tenetur doloribus, perspiciatis vel, accusamus eligendi doloremque deserunt cum error dignissimos, iusto repudiandae. Corrupti repudiandae
delectus laboriosam minus voluptate cupiditate doloremque cumque, harum perspiciatis quam quia amet assumenda aliquid? Facilis itaque est illo. Distinctio quidem voluptatem blanditiis! Quo illo quidem qui quisquam quas iste cupiditate neque! Et earum
quos, accusamus reiciendis, ipsum autem, at magni vitae voluptate impedit error eligendi quia illum aperiam pariatur animi repellat voluptates! Officiis commodi repellendus ratione quibusdam molestiae perferendis labore, animi atque facilis sint id
quaerat quos rem illum ipsum. Ut nihil amet cupiditate tenetur sequi, magnam dignissimos sed praesentium repellendus voluptas quasi fugit assumenda nemo, libero ex quaerat officia enim est! Autem sed eaque nostrum dolorum doloribus similique perferendis,
earum laudantium error natus adipisci corporis nulla recusandae aperiam fuga incidunt tempore consequuntur iste optio, tempora repudiandae. Dolorem mollitia eius debitis a, eveniet eos excepturi maxime, voluptate aliquid quia totam cumque amet ea,
quaerat accusantium dignissimos quis odio asperiores voluptatum itaque consectetur architecto at! Velit ipsa distinctio qui itaque harum quas ipsam non consectetur corrupti voluptatum earum, est magni. Sit blanditiis veniam voluptatum rem, minima
voluptatibus eligendi facilis quaerat perspiciatis esse corporis ea. Dolorum ullam dignissimos deleniti sit et modi temporibus illo distinctio harum rerum non illum, quam, dolorem sed officia nulla provident quaerat dolores nisi eligendi doloribus
fugit labore quod dolore. Architecto aut, vel dolor commodi reiciendis quibusdam modi? Dolorem minus repellat quidem animi asperiores eos, esse id alias obcaecati, laboriosam ipsum consequatur nulla earum doloremque iure expedita. Deserunt natus nobis
ullam repudiandae nisi saepe odit, explicabo eveniet voluptate odio illum reprehenderit harum commodi est obcaecati quam optio quasi excepturi minima quo vero debitis temporibus hic rerum! A quam, unde nesciunt, hic harum maxime quidem cum ipsam repellendus
animi, repellat minima vitae illum quae facere soluta! At amet porro corrupti modi architecto dolore saepe consequatur excepturi illo optio animi culpa consequuntur in soluta aspernatur, quo, possimus quis esse magnam ipsam laudantium! Consequuntur
eligendi, repellendus ipsa quos molestiae quas cupiditate perferendis iusto sunt laboriosam maxime, veritatis delectus voluptatum placeat possimus tempore fugiat, dolore dolorem natus quae quibusdam est corrupti. Dolorum perferendis sapiente quae
labore doloremque. Praesentium, quos sapiente numquam dignissimos perspiciatis odit, ab ducimus cupiditate voluptates magni reiciendis voluptatibus molestiae aut quod ipsa facere sed. Omnis totam dicta error corrupti ipsum dignissimos, odio vel in
fugit! Praesentium aliquid fuga blanditiis quos, dolorem incidunt repellat corporis voluptates. Unde excepturi similique voluptatum, quidem nemo explicabo perspiciatis facilis consequuntur temporibus quibusdam error vel ex rem minus obcaecati doloribus
consectetur. Inventore corporis id eos, placeat cupiditate soluta reprehenderit architecto quae veritatis blanditiis non eius nulla autem neque ex esse deleniti in? Quas explicabo repudiandae recusandae deleniti nostrum earum officiis veritatis! Mollitia
ducimus et deserunt aut libero a deleniti quos, voluptas quae odit quo corrupti recusandae enim accusantium rem suscipit at, beatae alias, sequi laborum id tenetur consequuntur excepturi labore. Neque reiciendis cupiditate accusantium voluptas incidunt
cum non earum possimus illum eos ratione, eaque ducimus, minus, laborum laboriosam dicta enim aliquid ad tempore. Perspiciatis aliquid ratione dignissimos nulla ex vel delectus quidem, atque cumque facilis quia laborum dolores inventore iste doloribus,
exercitationem nesciunt. Deserunt blanditiis, magni mollitia aperiam ex consectetur aut, laborum voluptas in exercitationem rerum architecto quasi enim modi porro, assumenda quibusdam libero commodi repudiandae ipsam nulla at atque! Ea voluptatum
laborum nobis, cumque quas, fugit sit consectetur, omnis suscipit labore explicabo tenetur atque. Distinctio fuga, delectus totam nam facere consectetur quibusdam laudantium eos at. Iure, excepturi dolor? Aut laborum optio eius numquam dignissimos
blanditiis assumenda ullam, consequatur modi quia illo, voluptates ratione sapiente ipsam nemo! Accusamus deserunt eveniet provident fugiat facere iure nisi nobis numquam nam veritatis laudantium vitae a totam, neque cupiditate voluptatum, minima
maxime error. Saepe magni dignissimos atque porro harum ea fugiat, iusto quod, commodi quo quam, corrupti maiores? Maxime doloribus labore minus, veritatis illum incidunt iure asperiores odio cum facere voluptatem cupiditate architecto tempora nesciunt
nam repellat rem dolorum aliquam ex, ipsa autem quisquam. Provident possimus ut culpa harum hic porro aut, sed vel ea sunt suscipit omnis doloribus inventore, accusantium nulla quis, commodi magnam. Saepe aut vitae delectus maxime nihil magni quam
iusto aspernatur? Odio et, similique, nihil, sint minima atque quaerat eius dolore tempora distinctio quisquam? Maxime ipsa et eveniet voluptates soluta, neque exercitationem ipsum natus deleniti earum totam repellat error reiciendis expedita itaque
consequatur vitae consequuntur corporis delectus modi. Consequatur quidem, tempore reprehenderit excepturi neque quo aliquid molestiae quae nostrum saepe fugit unde voluptatum voluptatem minus facilis consectetur perspiciatis vel sed. Ducimus illo,
quasi sunt corrupti hic nesciunt quas unde tempore perferendis ratione animi temporibus consequuntur blanditiis! Repellendus, explicabo pariatur! Quam consequuntur voluptates ratione architecto est rerum ullam, eius id incidunt laborum! Iure, temporibus
asperiores. Earum illo dolor alias, deleniti quibusdam tempore nesciunt esse. Soluta, optio sit harum dolorum odit ducimus libero delectus natus sequi expedita cumque adipisci, accusantium obcaecati voluptates pariatur quis reprehenderit cum laudantium.
Fuga aliquam maiores necessitatibus illo nulla nostrum exercitationem provident excepturi odit, minima magnam recusandae? Inventore dolores officia unde quo eveniet ex aperiam quaerat. Repellendus numquam deserunt doloribus consequatur vel cupiditate
velit, omnis dolor quaerat unde voluptatibus, iure eligendi temporibus eum fuga explicabo minima non deleniti sunt repellat nisi aspernatur culpa. Atque cumque perspiciatis quaerat fugit ex praesentium impedit veniam nostrum quas exercitationem ullam
voluptas nam dolorem sequi, corporis porro quod soluta numquam molestias beatae? Nihil omnis nostrum magni voluptates eum? Recusandae aperiam cumque sunt alias unde commodi dolore adipisci saepe dolor sed, odit itaque natus autem consequuntur cupiditate
maxime, at totam, a quaerat. Laboriosam qui earum illum excepturi sunt, dolor iusto placeat, minus esse aperiam non culpa, eveniet provident porro cumque cupiditate ratione dolores quisquam iure amet! Ea necessitatibus officiis rerum! Alias voluptatem
explicabo aliquam sunt ea facere illum, quam dolorem distinctio nobis animi qui ab aperiam delectus temporibus sed consequatur deleniti. Magnam enim cum impedit sunt eum nisi, debitis vel maxime quo nam! Soluta eum aperiam consequatur natus officia
incidunt ipsa nulla amet voluptate id? Id est consequatur reiciendis culpa necessitatibus illum. Quam rem laudantium ullam nobis? Quibusdam, itaque a ducimus veniam praesentium ea atque? Cupiditate facilis quia suscipit reiciendis, nulla esse qui
accusantium sapiente voluptatem quae exercitationem voluptatum enim et nesciunt pariatur recusandae iusto ex veritatis a sint ratione est vitae architecto perspiciatis! Optio eius quis ex asperiores? Consequatur sint dolorum odit dolor? Quisquam consequuntur
iusto cupiditate id eum eligendi culpa, alias eius laboriosam, dicta et. Optio, facere eius, repudiandae hic necessitatibus quia dolor commodi doloremque adipisci odio recusandae, ad iusto. Dolores sequi culpa sint quod quia deserunt. Consequuntur
non maiores perferendis ad officia quisquam est saepe, expedita velit. Veritatis dolorum corrupti id consequuntur et libero veniam aliquam labore quis blanditiis. Provident deleniti repudiandae quibusdam, vero aspernatur tenetur, omnis est officia,
non cum iusto sequi dolore neque id aperiam optio quam ea perferendis? Harum minima voluptatum at, excepturi numquam repellat possimus reiciendis voluptatem cum. Nemo quisquam cupiditate voluptatem exercitationem, numquam et ducimus, eius aliquam
aliquid fugiat non maiores, temporibus quo facere. Doloremque perferendis praesentium fugiat laboriosam eum dicta illo consequatur nobis dolorum, ducimus ipsam incidunt quis fuga, autem temporibus amet ea delectus officia. Fugiat doloremque voluptatem
corrupti itaque! Vitae, itaque a! Beatae eligendi debitis maiores tempore doloribus nulla quos minus temporibus voluptatibus quo ad, earum at nobis nihil assumenda veniam atque a ipsam. Facilis esse ipsum sapiente non veritatis dolor saepe tenetur
fugit, rerum qui labore reiciendis modi dignissimos porro natus dicta explicabo adipisci obcaecati autem expedita quod? Commodi culpa earum, aut iusto voluptate mollitia incidunt sed voluptatibus, laborum enim facere ad deleniti voluptas. Obcaecati
praesentium quod minus optio, veniam saepe corrupti nulla repellendus, voluptatum eos inventore, quisquam dolorem dolores cumque. Aliquam explicabo, officia illo ipsa doloremque nulla esse quibusdam dolore dignissimos repellendus facilis amet autem
quaerat exercitationem. Nisi, provident? Quasi ex commodi, officiis deserunt amet debitis culpa ipsum? Eum repellendus libero distinctio ipsam eveniet facilis reiciendis recusandae amet! Maxime doloribus harum sunt dolores nobis nostrum quod ea expedita
quae reprehenderit! Quae sequi repudiandae incidunt illum dignissimos veritatis quibusdam veniam adipisci culpa dolorem assumenda cupiditate sint sunt recusandae quia tenetur quos in, velit quidem qui nobis. Quidem, facilis officiis quae necessitatibus
ipsam ipsum cupiditate magnam hic harum ex similique delectus saepe repellendus repellat consequuntur modi aperiam non sunt vero consequatur laudantium animi! Laborum dignissimos dolor dolorem sequi atque porro reiciendis repudiandae sapiente veritatis
pariatur? Nisi voluptas distinctio nam libero perspiciatis? Ex magnam dolorem, fugit praesentium consequatur alias sequi voluptatibus distinctio rem temporibus dolore repellat quam quia nam vero eius quo, soluta quidem ipsum voluptates quibusdam porro!
Iste, itaque, nihil cumque eos error numquam, voluptate eligendi atque incidunt eius ipsa corrupti! Quam ab autem labore explicabo laboriosam corporis veritatis exercitationem mollitia eligendi! Sed hic facere necessitatibus reiciendis accusantium
ab quis dolor veritatis enim. Veritatis, ab harum. Et suscipit nesciunt magnam beatae saepe at. Minus nihil quod repellendus quam a quos magnam voluptatem quaerat, dolorem quia nobis nostrum, unde facilis amet? Illo distinctio molestias officia, commodi
dolorem reiciendis officiis a quas amet velit adipisci autem eos, deleniti eveniet quae laboriosam esse nulla similique dolor enim perspiciatis sequi nisi at. Aut incidunt repellat eveniet suscipit numquam, vel animi officia tenetur autem. Doloribus
beatae minus fuga magni nihil eius laborum voluptatum sed, similique doloremque placeat? Vel molestias neque id, sint quidem eligendi architecto voluptates dolores in asperiores dolorem? Aperiam sequi totam nobis, eaque perferendis facere quae ipsa
delectus itaque earum provident excepturi nihil consequuntur debitis ratione magni rerum odit dignissimos explicabo ab est sit. Laborum at incidunt, placeat reiciendis quidem beatae. Quod perspiciatis ea quia maxime sint id at itaque aut, illum doloremque
quos voluptate facere, maiores qui sunt voluptatibus excepturi. Minima libero cum blanditiis, dignissimos amet quidem placeat quia. Facilis sunt culpa soluta deleniti! Neque, eveniet repellat recusandae odio nobis sint, aliquid laboriosam sed alias
inventore quis rem qui, voluptas similique odit impedit officia praesentium quas? Mollitia sunt a voluptatem repellat exercitationem sit perferendis quibusdam nam odit quasi, fugiat iure rerum architecto vero obcaecati magnam, molestiae fugit, nulla
qui? Consectetur facilis, odit cumque voluptate voluptas pariatur nobis ducimus aliquam, assumenda deserunt officia voluptates magnam, non eligendi dolore in facere veniam ipsa aliquid. Nesciunt ad commodi nisi minima ex minus praesentium. Saepe laborum
qui odio delectus cumque culpa optio molestiae magni nulla incidunt, asperiores, expedita illo ad non quaerat et quos! Aperiam adipisci sapiente porro nesciunt voluptates ipsum error? Ex ducimus distinctio sunt minus in sequi totam, dolor sed eveniet
cum autem praesentium fuga cumque obcaecati at ullam officia perspiciatis omnis voluptates expedita, nostrum unde architecto delectus? Facere nihil similique nobis quam corporis animi atque explicabo, quasi minima tenetur ratione, iure adipisci quod
alias vitae minus eos officiis. Esse sed eligendi accusamus! Deleniti nobis impedit nihil, ipsam harum inventore illo nesciunt assumenda officiis, sunt, voluptate aliquid aspernatur quidem quas doloremque incidunt repellendus delectus vitae repudiandae
autem eligendi. Voluptatibus harum deleniti praesentium dolorem, eaque enim, reiciendis perspiciatis delectus aperiam quas cupiditate illum quam quaerat veniam, molestiae ea nam! Dolor odit quae officiis saepe, nulla ea dolore mollitia recusandae
distinctio magni fuga ratione voluptatum repudiandae laboriosam fugiat iusto quis aperiam explicabo temporibus quibusdam natus repellendus sit? Iste fuga repellendus molestias nam, inventore totam? Fuga velit blanditiis incidunt excepturi debitis
consequatur perspiciatis esse laboriosam obcaecati, asperiores aliquid voluptatum molestias inventore deserunt cumque tenetur culpa, aperiam hic autem alias ipsam libero deleniti ut? Dignissimos, molestiae? Labore sunt quod eos quas adipisci aspernatur
earum laudantium necessitatibus voluptates quam molestias officia est sapiente natus ipsum, eligendi tempore nisi. Veritatis?
</div>
</body>
</html>
As Adam mentioned in the comment, you just need to change the container width and max-width properties in your CSS.
In your code snippet, the width: 1366px is causing browser to create that horizontal scrollbar in your website, so use max-width: 1366px and width: ${unit}% will allow you to have a responsive container without that ugly scrollbar.
And As far as I know, this technique is very popular in Responsive Web Design world.
One more thing, I'm not using width: 100% here is because that you usually want to have some white space between your content and the browser frame. Hope this help!