Related
This question already has answers here:
Prevent content from expanding grid items
(3 answers)
Closed 12 months ago.
I'm trying to get the cyan box to scroll horizontally instead of triggering a horizontal scrollbar on the page.
It seems to break when I try using a grid layout; I had to horizontally scrolling before when I didn't use a grid.
How can I fix this? .page-wrap should fill the whole window and add vertical scrollbar as needed. Only the .boxs should scroll horizontally.
html {
overflow: hidden;
}
.page-wrap {
display: grid;
grid-template-areas:
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 60px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}
.sidebar {
background-color: green;
grid-area: sidebar;
}
.footer {
background-color: red;
grid-area: footer;
}
.main {
background-color: yellow;
grid-area: main;
}
.box {
background-color: cyan;
margin: 10px;
overflow-x: scroll;
}
<div class="page-wrap">
<div class="sidebar">sidebar</div>
<div class="main">
<div class="box">
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, modi laudantium facilis. Cum quasi dolore quam doloribus reprehenderit illum nostrum id quas ea. Nostrum adipisci dolor nulla veniam exercitationem ipsa.</td>
<td>Accusamus deserunt voluptatibus rem, aspernatur enim dolores, amet illum accusantium! Tempora, repellendus, fuga. Ex, consectetur mollitia reprehenderit qui, consequuntur ipsam maiores excepturi sapiente tempore odit repudiandae facere incidunt! Vero, beatae.</td>
<td>Et minus eaque corrupti voluptas, earum ex non similique. Officiis a dignissimos veritatis quas provident sunt? Fuga vel officia qui, numquam eos sint, totam aspernatur, commodi quis, temporibus animi excepturi!</td>
<td>Natus quaerat, sint nemo quia laudantium dolorem asperiores deserunt neque porro esse iusto reprehenderit et assumenda ipsum saepe consequuntur soluta officiis illum maiores cumque quos voluptate expedita tenetur eum autem!</td>
<td>Asperiores ducimus accusantium aliquid nemo aliquam fugiat culpa maxime repudiandae pariatur minus. Eum incidunt iste molestias officiis sunt nostrum facilis velit. Reprehenderit quis aut officia quas beatae assumenda esse asperiores.</td>
<td>Architecto, nam consequuntur odit distinctio! Suscipit fuga nam reprehenderit, nostrum modi provident iusto aperiam alias qui. Optio repudiandae reiciendis, omnis esse maiores! A blanditiis ducimus voluptate nobis exercitationem. Temporibus, vel!</td>
<td>Similique et est omnis fuga, ad earum sapiente. Nam qui est quidem. Dignissimos amet harum voluptate a, sint culpa autem et neque, natus quod cum eos laudantium molestias, dolorem optio.</td>
<td>Saepe aspernatur consequuntur sint nisi dolores nihil ab repudiandae, odio dolor, assumenda culpa corporis fugiat ullam officia quibusdam eaque enim, harum voluptatem eveniet reprehenderit natus consectetur deleniti nesciunt et! Omnis!</td>
<td>Nihil quas quod numquam ut fugiat doloremque repudiandae animi iusto. Ullam quidem ipsa dolorem quos veritatis adipisci quisquam obcaecati culpa et consequatur, aspernatur unde eligendi rerum labore ab odit asperiores.</td>
<td>Hic, aliquam, harum? Harum tempora accusantium animi ratione id perspiciatis quasi maiores iste odio quisquam, adipisci, laudantium cupiditate voluptatem mollitia soluta sunt eveniet facere quibusdam aspernatur? Suscipit obcaecati dolorum eligendi.</td>
<td>Possimus natus, dignissimos vero nesciunt cum voluptatibus reiciendis commodi maxime voluptates qui illo quia distinctio tempora perferendis fugit modi itaque, quis recusandae quisquam quos ullam alias! Voluptatum repellat mollitia incidunt.</td>
<td>Quod in ducimus, saepe obcaecati, eius vero ipsa ea cum reprehenderit velit sunt numquam eaque sapiente dolorem, possimus id nostrum natus eligendi accusamus nulla voluptatibus necessitatibus harum vitae. Dolorum, praesentium.</td>
<td>Ab iusto, dicta deleniti explicabo perspiciatis pariatur deserunt blanditiis vel accusantium. Tempore architecto fugit cum similique laudantium et veritatis id, quos deleniti eaque voluptatum laboriosam, natus commodi itaque veniam vel.</td>
<td>Dignissimos, quis excepturi, ratione nemo minima tenetur possimus. Quos eum placeat veniam voluptas, tempora, aliquam? Dolores ipsum obcaecati nisi itaque dolor, officiis quidem minima, nesciunt molestias facilis cupiditate repellat sequi.</td>
<td>Dolores asperiores quidem totam illo veniam! Natus architecto nulla et asperiores modi quaerat, sed! Quam cum rem voluptatibus, rerum pariatur deserunt fugit odit, totam blanditiis animi nulla nisi facilis saepe.</td>
<td>Quibusdam dolor explicabo soluta adipisci est quis aliquam tempora non, sint laudantium tempore minima inventore dolorum magni ad a rem magnam dignissimos expedita maxime numquam voluptas facere, quidem harum aliquid.</td>
<td>Facere dolorem, ullam quasi. Numquam alias maiores harum voluptate delectus quos totam architecto voluptatum, sapiente pariatur modi, autem culpa omnis facere commodi unde assumenda. Quaerat, rem deserunt. Beatae, voluptates, cum.</td>
<td>Magni pariatur eos quo perspiciatis ipsam a modi accusantium nulla fugiat officiis dolor ducimus hic, provident eius facilis quibusdam molestiae quasi, sunt, quis repellat nesciunt! Enim ipsum ducimus cumque placeat?</td>
<td>Recusandae porro, consectetur placeat, temporibus delectus nesciunt aliquid nam incidunt at ipsa accusantium hic maxime tempora dolorum! Totam reiciendis, consequatur deserunt eveniet natus, vitae ipsa voluptate repudiandae velit, quia aspernatur!</td>
<td>Et iusto ab repellat quae? Quas, ratione sapiente a, fuga voluptates, unde ullam dolores, fugit sint magnam perferendis ad quae. Magnam consequatur nisi quisquam, maiores quasi qui provident similique nobis.</td>
<td>Ab qui hic, incidunt consequuntur officia exercitationem laboriosam suscipit veritatis est deleniti, debitis reiciendis at quidem consequatur iure ut quisquam tempore delectus aut soluta sequi tenetur sed magnam nostrum. Ab?</td>
<td>Earum quis perspiciatis perferendis, rem, fugit cumque reiciendis! Porro consequatur quam consequuntur quaerat, atque praesentium adipisci fugit, dignissimos, ab labore reprehenderit provident temporibus, totam magnam illum pariatur deserunt alias cum!</td>
<td>Officiis sit quam vero nobis doloribus necessitatibus possimus. Veniam, totam! Illo magnam, ipsum consequuntur at, ipsam sit fuga rerum architecto eum libero officiis, nobis! Obcaecati incidunt, mollitia placeat eaque atque.</td>
<td>Nisi nam assumenda laudantium quos non quasi. Fuga enim, voluptatibus possimus tempora numquam dolores maiores, eum quaerat sit odit distinctio saepe optio aut accusamus explicabo, dolorem quidem consequatur. Maxime, similique!</td>
<td>Autem inventore expedita quibusdam ipsum. Consequuntur nulla in vero blanditiis deleniti dignissimos, earum eligendi voluptatibus, minus illo, perspiciatis doloremque nisi sed maiores tempora. Excepturi minima, officia incidunt vitae pariatur illo!</td>
<td>Sequi delectus dolorum, ea rem quis voluptatem accusantium quibusdam suscipit corrupti est laborum adipisci tenetur optio expedita inventore quam molestiae cupiditate totam. Rem sed, odit blanditiis eius quia vel eos.</td>
<td>Vero dolor nam quisquam reiciendis quibusdam id sapiente quia est veritatis facilis, expedita recusandae sequi iste tempora harum illum nihil. Amet laborum, accusamus soluta dolores et iure? Possimus, et? Iusto.</td>
<td>Ullam ipsum blanditiis obcaecati, rem aliquam voluptates fuga quo praesentium quia cum dignissimos debitis laboriosam itaque? Nostrum explicabo quae, rem praesentium accusantium dicta officia veritatis magni earum officiis. Inventore, ut.</td>
<td>Quisquam, ex, dolore. Voluptates porro eum, blanditiis ullam non sequi suscipit iste eius! Soluta, nam quia impedit veritatis laudantium id ea iure autem magnam sapiente, a modi omnis. Optio, animi!</td>
<td>Consequuntur amet, tenetur quidem consequatur doloremque distinctio ipsum minima, incidunt, fuga voluptatibus placeat quae autem recusandae quasi. Nihil, dolorum? Aliquid eligendi hic expedita saepe recusandae suscipit tempora tempore illum tenetur.</td>
</tr>
</table>
</div>
</div>
<div class="footer">footer</div>
</div>
Figured it out.
html {
overflow: hidden;
}
.page-wrap {
display: grid;
grid-template-areas:
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 60px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
overflow-x: auto;
}
.sidebar {
background-color: lime;
grid-area: sidebar;
}
.footer {
background-color: orange;
grid-area: footer;
}
.main {
background-color: yellow;
grid-area: main;
min-width: 0;
}
.box {
background-color: cyan;
margin: 10px;
overflow-x: scroll;
max-width: 100%;
}
<div class="page-wrap">
<div class="sidebar">sidebar</div>
<div class="main">
<div class="box">
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, modi laudantium facilis. Cum quasi dolore quam doloribus reprehenderit illum nostrum id quas ea. Nostrum adipisci dolor nulla veniam exercitationem ipsa.</td>
<td>Accusamus deserunt voluptatibus rem, aspernatur enim dolores, amet illum accusantium! Tempora, repellendus, fuga. Ex, consectetur mollitia reprehenderit qui, consequuntur ipsam maiores excepturi sapiente tempore odit repudiandae facere incidunt! Vero, beatae.</td>
<td>Et minus eaque corrupti voluptas, earum ex non similique. Officiis a dignissimos veritatis quas provident sunt? Fuga vel officia qui, numquam eos sint, totam aspernatur, commodi quis, temporibus animi excepturi!</td>
<td>Natus quaerat, sint nemo quia laudantium dolorem asperiores deserunt neque porro esse iusto reprehenderit et assumenda ipsum saepe consequuntur soluta officiis illum maiores cumque quos voluptate expedita tenetur eum autem!</td>
<td>Asperiores ducimus accusantium aliquid nemo aliquam fugiat culpa maxime repudiandae pariatur minus. Eum incidunt iste molestias officiis sunt nostrum facilis velit. Reprehenderit quis aut officia quas beatae assumenda esse asperiores.</td>
<td>Architecto, nam consequuntur odit distinctio! Suscipit fuga nam reprehenderit, nostrum modi provident iusto aperiam alias qui. Optio repudiandae reiciendis, omnis esse maiores! A blanditiis ducimus voluptate nobis exercitationem. Temporibus, vel!</td>
<td>Similique et est omnis fuga, ad earum sapiente. Nam qui est quidem. Dignissimos amet harum voluptate a, sint culpa autem et neque, natus quod cum eos laudantium molestias, dolorem optio.</td>
<td>Saepe aspernatur consequuntur sint nisi dolores nihil ab repudiandae, odio dolor, assumenda culpa corporis fugiat ullam officia quibusdam eaque enim, harum voluptatem eveniet reprehenderit natus consectetur deleniti nesciunt et! Omnis!</td>
<td>Nihil quas quod numquam ut fugiat doloremque repudiandae animi iusto. Ullam quidem ipsa dolorem quos veritatis adipisci quisquam obcaecati culpa et consequatur, aspernatur unde eligendi rerum labore ab odit asperiores.</td>
<td>Hic, aliquam, harum? Harum tempora accusantium animi ratione id perspiciatis quasi maiores iste odio quisquam, adipisci, laudantium cupiditate voluptatem mollitia soluta sunt eveniet facere quibusdam aspernatur? Suscipit obcaecati dolorum eligendi.</td>
<td>Possimus natus, dignissimos vero nesciunt cum voluptatibus reiciendis commodi maxime voluptates qui illo quia distinctio tempora perferendis fugit modi itaque, quis recusandae quisquam quos ullam alias! Voluptatum repellat mollitia incidunt.</td>
<td>Quod in ducimus, saepe obcaecati, eius vero ipsa ea cum reprehenderit velit sunt numquam eaque sapiente dolorem, possimus id nostrum natus eligendi accusamus nulla voluptatibus necessitatibus harum vitae. Dolorum, praesentium.</td>
<td>Ab iusto, dicta deleniti explicabo perspiciatis pariatur deserunt blanditiis vel accusantium. Tempore architecto fugit cum similique laudantium et veritatis id, quos deleniti eaque voluptatum laboriosam, natus commodi itaque veniam vel.</td>
<td>Dignissimos, quis excepturi, ratione nemo minima tenetur possimus. Quos eum placeat veniam voluptas, tempora, aliquam? Dolores ipsum obcaecati nisi itaque dolor, officiis quidem minima, nesciunt molestias facilis cupiditate repellat sequi.</td>
<td>Dolores asperiores quidem totam illo veniam! Natus architecto nulla et asperiores modi quaerat, sed! Quam cum rem voluptatibus, rerum pariatur deserunt fugit odit, totam blanditiis animi nulla nisi facilis saepe.</td>
<td>Quibusdam dolor explicabo soluta adipisci est quis aliquam tempora non, sint laudantium tempore minima inventore dolorum magni ad a rem magnam dignissimos expedita maxime numquam voluptas facere, quidem harum aliquid.</td>
<td>Facere dolorem, ullam quasi. Numquam alias maiores harum voluptate delectus quos totam architecto voluptatum, sapiente pariatur modi, autem culpa omnis facere commodi unde assumenda. Quaerat, rem deserunt. Beatae, voluptates, cum.</td>
<td>Magni pariatur eos quo perspiciatis ipsam a modi accusantium nulla fugiat officiis dolor ducimus hic, provident eius facilis quibusdam molestiae quasi, sunt, quis repellat nesciunt! Enim ipsum ducimus cumque placeat?</td>
<td>Recusandae porro, consectetur placeat, temporibus delectus nesciunt aliquid nam incidunt at ipsa accusantium hic maxime tempora dolorum! Totam reiciendis, consequatur deserunt eveniet natus, vitae ipsa voluptate repudiandae velit, quia aspernatur!</td>
<td>Et iusto ab repellat quae? Quas, ratione sapiente a, fuga voluptates, unde ullam dolores, fugit sint magnam perferendis ad quae. Magnam consequatur nisi quisquam, maiores quasi qui provident similique nobis.</td>
<td>Ab qui hic, incidunt consequuntur officia exercitationem laboriosam suscipit veritatis est deleniti, debitis reiciendis at quidem consequatur iure ut quisquam tempore delectus aut soluta sequi tenetur sed magnam nostrum. Ab?</td>
<td>Earum quis perspiciatis perferendis, rem, fugit cumque reiciendis! Porro consequatur quam consequuntur quaerat, atque praesentium adipisci fugit, dignissimos, ab labore reprehenderit provident temporibus, totam magnam illum pariatur deserunt alias cum!</td>
<td>Officiis sit quam vero nobis doloribus necessitatibus possimus. Veniam, totam! Illo magnam, ipsum consequuntur at, ipsam sit fuga rerum architecto eum libero officiis, nobis! Obcaecati incidunt, mollitia placeat eaque atque.</td>
<td>Nisi nam assumenda laudantium quos non quasi. Fuga enim, voluptatibus possimus tempora numquam dolores maiores, eum quaerat sit odit distinctio saepe optio aut accusamus explicabo, dolorem quidem consequatur. Maxime, similique!</td>
<td>Autem inventore expedita quibusdam ipsum. Consequuntur nulla in vero blanditiis deleniti dignissimos, earum eligendi voluptatibus, minus illo, perspiciatis doloremque nisi sed maiores tempora. Excepturi minima, officia incidunt vitae pariatur illo!</td>
<td>Sequi delectus dolorum, ea rem quis voluptatem accusantium quibusdam suscipit corrupti est laborum adipisci tenetur optio expedita inventore quam molestiae cupiditate totam. Rem sed, odit blanditiis eius quia vel eos.</td>
<td>Vero dolor nam quisquam reiciendis quibusdam id sapiente quia est veritatis facilis, expedita recusandae sequi iste tempora harum illum nihil. Amet laborum, accusamus soluta dolores et iure? Possimus, et? Iusto.</td>
<td>Ullam ipsum blanditiis obcaecati, rem aliquam voluptates fuga quo praesentium quia cum dignissimos debitis laboriosam itaque? Nostrum explicabo quae, rem praesentium accusantium dicta officia veritatis magni earum officiis. Inventore, ut.</td>
<td>Quisquam, ex, dolore. Voluptates porro eum, blanditiis ullam non sequi suscipit iste eius! Soluta, nam quia impedit veritatis laudantium id ea iure autem magnam sapiente, a modi omnis. Optio, animi!</td>
<td>Consequuntur amet, tenetur quidem consequatur doloremque distinctio ipsum minima, incidunt, fuga voluptatibus placeat quae autem recusandae quasi. Nihil, dolorum? Aliquid eligendi hic expedita saepe recusandae suscipit tempora tempore illum tenetur.</td>
</tr>
</table>
</div>
</div>
<div class="footer">footer</div>
</div>
I remembered an annoying quirk with flexbox, thought it might apply to grid too.
The trick is to add min-width: 0 to .main.
I have a website that has its content displayed in two columns, one being the main content, and the other a sidebar. The sidebar is not fixed, and it just scrolls naturally together with the main content.
However, if the main content is longer than the sidebar, you will eventually get to a point where there is nothing more in the sidebar, but there is more content to read (and the entire page keeps scrolling). In this scenario, i would like the sidebar to become sticky, where the bottom of the sidebar will stick to the bottom of the screen.
And the reason this is super confusing to me, is because this sort of behaviour is very achievable in the upside-down version, meaning sticking the sidebar to the top, where the top of the sidebar will stick to the top of your screen for as long as there is extra main content, and once you get to the end it will continue scrolling away naturally with the content. Like how it does here: https://jsfiddle.net/0dxLfzn8/1/
That behaviour initially made me believe that switching from top: 0 to bottom: 0 would do what i described was my desired behaviour. But I have tried that here, and it doesn't seem to do anything at all: https://jsfiddle.net/0dxLfzn8/
HTML:
<div class="container">
<div class="content">
</div>
<div class="sidebar">
<div class="sidebar__inner">
</div>
</div>
</div>
CSS:
.container {
display: flex;
}
.content {
flex: 1;
}
.sidebar {
flex-basis: 200px;
}
.sidebar__inner {
position: sticky;
bottom: 0;
}
It doesn't seem to want to stick to the bottom as it did to the top, and i don't really understand why it wouldn't. From the behaviour of top, it seems like that's what bottom should be for.
How could i achieve this (without javascript of course)?
(and it's a hard thing to look up a solution for, because the search results are filled with the sticky footer problem)
Because you are using flex. Your sidebar needs to be aligned vertically, in your case to the bottom.
So you need to add align-self: flex-end; to your sidebar.
More on position: sticky; here.
And more on position: sticky; not working because of flex here.
Also note that you should add the vendor prefix for webkit browsers when using sticky: position: -webkit-sticky;
.container {
display: flex;
}
.content {
flex: 1;
}
.sidebar {
flex-basis: 200px;
position: -webkit-sticky;
position: sticky;
bottom: 0;
align-self: flex-end;
}
.box {
margin-bottom: 1rem;
width: 100%;
height: 30vh;
background: grey;
}
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet suscipit assumenda, similique atque enim odio sequi, at magni non deserunt a! Nulla pariatur illum voluptate sequi ex optio blanditiis cupiditate vitae officiis id, aliquam dolorum fugiat
itaque excepturi laudantium ipsa accusamus minima suscipit eum quis vel praesentium commodi aut nostrum. Quam veritatis sit accusantium nisi, exercitationem in facere, cumque nobis, nihil at consectetur ex aperiam voluptatem consequuntur fugit laborum
ut debitis sunt illum amet reprehenderit iusto aliquid. Tempore quo aut, consequatur voluptatibus ea corporis hic beatae cumque dolorum eius non autem error ipsa, esse facere delectus tenetur cupiditate velit ad numquam! Fuga aut obcaecati natus!
Sit sint, sed blanditiis quia quis magni facere, minima perspiciatis quos illum voluptas provident necessitatibus vel fuga doloremque aut quidem ullam eaque eum libero! Quae, cupiditate animi laboriosam. Unde, ipsum, numquam. Expedita dignissimos
autem deleniti, aliquam atque quos, perferendis deserunt porro provident, molestiae possimus adipisci cum quasi. Autem vero voluptate, nam dolore repellendus culpa a quo voluptatum. A alias dolorem aut quam, tempora ratione rerum quae adipisci assumenda
accusamus sunt, molestias quos asperiores voluptas reiciendis nesciunt, maiores culpa! Quae inventore, voluptates esse vero beatae itaque sequi mollitia quisquam id. Alias, eveniet, nesciunt! Sequi id non animi eius voluptatibus accusamus sapiente
porro fugiat esse nam, assumenda eligendi sunt temporibus! Ducimus explicabo quas, magni temporibus sint sunt necessitatibus, iste aspernatur consequatur corrupti odio aliquam molestiae? Accusamus incidunt quia molestiae, reprehenderit neque nulla,
quibusdam ratione facilis facere officiis excepturi illum sequi non dicta iure! Nobis ea earum, ex ipsam eligendi corporis doloribus eaque nesciunt recusandae voluptas voluptatibus numquam totam quas quam animi facilis excepturi porro praesentium
suscipit labore incidunt quidem quae ad error dolorum. Dolor neque et vero minima tenetur, possimus quasi. Placeat quae, ratione tempora a quis provident odio qui ea nulla laudantium reiciendis numquam dignissimos consequatur laboriosam id eveniet
iure esse consectetur. A maiores quos quasi soluta quia ad consequatur ullam nisi. Inventore repellat nesciunt quia. Aut quae, quos molestiae magnam aliquam, libero, iste labore ut distinctio amet id quis eaque, animi sunt repellat laudantium eos
dolorum unde maxime sapiente! Cum sequi libero, praesentium! Provident alias eaque vitae quidem earum, minus reprehenderit inventore fugit, nesciunt repellendus est odit voluptas voluptate eveniet architecto iusto nulla aliquam explicabo. Qui eveniet
quam eligendi illo. Tempora a perferendis itaque eos suscipit officia laudantium minus nihil voluptate doloribus! Impedit distinctio reiciendis facilis maxime ea necessitatibus assumenda fugiat non commodi iure provident earum repellat doloribus,
similique labore, atque nemo harum enim quas nostrum unde. Aspernatur culpa eveniet accusamus, ratione, dolor animi non ipsa, dicta fuga magnam nesciunt ex? Laudantium quidem perferendis fugiat maiores! Fugit labore, atque cum mollitia asperiores
perferendis. Placeat mollitia, ipsam inventore consectetur explicabo sed necessitatibus dolorem, nesciunt porro sequi repellat consequuntur dicta sint est ab non expedita dolores aut quia nobis, saepe error, exercitationem rem deserunt. Voluptates,
porro. Tempore, quam odio, provident voluptates iste optio accusantium dignissimos, perferendis fugiat officia dolores est. Officia cum deserunt aut earum quos distinctio similique tempora corporis iusto odio, nulla debitis labore atque quasi quisquam
doloremque saepe iure inventore quia, quo porro a. Sequi dolore perspiciatis culpa ratione aspernatur laudantium nam animi rem perferendis nisi dolorem veritatis, assumenda non nemo nesciunt vel. Perspiciatis facilis, nulla. Ratione voluptates beatae,
incidunt enim ea quas recusandae, deleniti laborum assumenda, magni nihil dolore velit adipisci illo quam possimus aliquam dolores. Non excepturi, vel, rem consequatur modi totam dolorem alias unde autem obcaecati corporis quae ea error sed atque
facilis voluptatum deserunt at numquam velit quod molestiae, nesciunt voluptas. Nihil, non eius necessitatibus porro incidunt labore tempore amet, adipisci aliquam, provident iste. Autem dolorum numquam nihil necessitatibus et deleniti voluptate at
quos ea nesciunt, optio sint ducimus labore, quisquam cupiditate iste laborum odio hic corrupti expedita doloribus odit. Odit quidem repellat vero facere repudiandae veniam voluptatem inventore in reprehenderit. Debitis odio laudantium atque. Repudiandae
recusandae veniam culpa, laboriosam neque reiciendis illo perferendis reprehenderit quaerat alias molestiae nobis soluta repellat et delectus maxime tempora corporis dolore esse iste! Exercitationem facere officiis quo doloribus laudantium nostrum
accusamus, qui placeat! Rem voluptatum debitis quod repudiandae facilis, dignissimos quaerat impedit laborum iste officia sed itaque quisquam id architecto. Repellat voluptatem voluptates nam error sed sint velit alias cupiditate, distinctio corrupti
soluta molestiae expedita, nihil fuga, iusto officia laborum aliquam voluptatum nulla praesentium nisi incidunt eligendi pariatur magni. Aliquam provident iste tempora vel incidunt accusantium pariatur placeat, eius sint illo quos eaque nostrum ut
illum sapiente voluptatum nam, soluta expedita saepe id voluptates. Repellat dolorum repellendus iusto nesciunt tempore ut, a ad minima perferendis voluptas odio, quidem, ex doloribus pariatur saepe. Optio voluptates dolorum est excepturi corporis
molestias commodi, tempore labore ipsum voluptas consectetur exercitationem minima. Quos excepturi ipsum harum enim repellendus earum a veritatis nemo odio quam corrupti culpa impedit, qui molestiae dolore eum, aut quia consectetur consequuntur expedita
exercitationem aliquid labore numquam. Asperiores maiores ab suscipit quis dolor quaerat. Iure, ea! Provident labore, beatae nam blanditiis dolores est saepe, dolor consequatur ipsa eum amet voluptates earum excepturi dolorum officia. Accusantium
modi neque totam a culpa, ab non ipsa, ex repellat iure ea recusandae consequuntur temporibus obcaecati id, explicabo ipsam ratione, adipisci magni sit commodi nostrum? Excepturi officiis amet tempore deleniti error asperiores cumque dolor reprehenderit
aut, molestias, officia tempora incidunt ipsa temporibus. Eveniet necessitatibus eligendi eum vitae, sed qui labore ad, commodi dicta ea veritatis magnam iure asperiores veniam dolorem iste repellendus officiis corporis suscipit dolorum excepturi.
Placeat eligendi eaque eum quibusdam, maiores recusandae. Facilis non inventore, veniam dolores animi dolorum, nihil placeat ut modi quo ratione numquam. Repellat sint nemo quos dolorem, aut assumenda consequuntur at nulla, accusamus distinctio ea
molestias veniam quo labore vitae quibusdam culpa fugit. Obcaecati officia illo possimus expedita enim, voluptatum fuga molestias facere quis assumenda, illum molestiae nulla alias quod soluta quibusdam odit. Repellendus eius enim sequi praesentium
nesciunt odit placeat doloremque eaque eos inventore quia blanditiis voluptatibus nisi, autem laborum obcaecati quod accusantium, tempore, eum ipsam, corporis quae temporibus. Consequatur id, doloremque hic esse nulla aliquam cum eos, repudiandae
optio magnam, commodi laboriosam sed dolor nesciunt! Sit quasi fugit et ut reprehenderit enim cupiditate quisquam excepturi perspiciatis fuga aliquam cum, similique autem hic nulla vitae laudantium numquam distinctio praesentium iure illum totam magnam.
Ea aliquam eius laudantium deserunt mollitia autem error cum blanditiis. Officia voluptates incidunt, officiis sunt est neque nisi rem repellendus quaerat dolores alias error esse modi eum, tenetur consequatur itaque quam nam, cupiditate ipsam odit.
Aperiam nobis, consequuntur quis temporibus dolores unde aspernatur ratione architecto sed aliquid sit, rerum dolorem natus corrupti expedita, maiores quam dignissimos accusantium maxime qui? Corporis optio reiciendis ad iusto provident facilis quod
vitae dignissimos! Aspernatur deserunt accusamus quis iure, qui, culpa vitae at, ut inventore, illo eaque facere recusandae animi nesciunt? Hic, natus sunt id nulla ducimus. Deserunt odit dolores quasi labore eligendi voluptas impedit aspernatur rerum
porro exercitationem sint, dolorem earum! Ipsum animi voluptates amet nulla, provident voluptatibus earum eos ea quos dolore aperiam hic nihil repellendus, modi molestias, pariatur neque nemo odit corporis veritatis. Suscipit quo cupiditate amet minima
maiores, ipsa ratione porro magni consequuntur, sunt, inventore et laudantium aliquam magnam dolores mollitia corporis quasi. Dicta repudiandae, doloremque quo illum voluptatem in temporibus omnis dolorum quis explicabo quasi ad quod optio excepturi
aspernatur cupiditate et veniam iusto porro amet. Sunt cum id, tempore laborum consectetur atque culpa modi ipsum corporis maiores earum quia consequuntur eum unde quae rerum odio eaque est non repellat iure. Qui, ipsam, nisi? Ut amet dicta vitae
quo blanditiis reprehenderit, debitis voluptatem nostrum, animi sint ex veritatis magni nam autem impedit dolores repudiandae! Iusto soluta sapiente velit omnis mollitia, repellendus voluptatum ullam. Doloremque velit tempora porro sunt rerum. Culpa
saepe perspiciatis officia est nam cupiditate consequatur sunt, et? Ea sint, reiciendis ipsam assumenda veritatis distinctio ut quo aspernatur, voluptates eum perferendis deserunt, error, voluptate sunt voluptatum quaerat earum hic quasi quis. Eveniet
fuga aperiam dolores cumque nobis est quae ab ullam facere quidem nesciunt et earum vitae consequuntur, amet provident minus maiores. Voluptatem aperiam, quaerat temporibus. Tenetur soluta nostrum cumque culpa sit recusandae delectus iusto optio obcaecati
repellat sint repudiandae hic id incidunt vero laborum adipisci numquam animi consequatur dolorem itaque, mollitia consectetur quos est cupiditate? Nisi asperiores delectus at voluptas, repudiandae sunt repellat? Saepe veniam beatae, maxime voluptatum
fugiat minima rerum, autem reprehenderit est sequi blanditiis officiis nisi, voluptate pariatur cum ducimus qui, error? Odio nihil neque, libero ipsam et obcaecati minus necessitatibus sequi officia quia id deleniti, provident incidunt? Amet ad dolores,
esse labore impedit, nihil explicabo obcaecati eos vel eius rem sit quia cupiditate, ipsam in deleniti magnam quod earum velit non corporis repudiandae laudantium. Nulla cumque dolores earum? Eveniet rerum fuga, perspiciatis, reiciendis, molestiae
reprehenderit impedit ab quisquam sit deleniti quos animi aliquid adipisci, placeat at magni dignissimos quis? Repudiandae nesciunt fugiat exercitationem repellat architecto sequi corrupti, non aut, in qui minus laudantium eaque, unde magni voluptas
vel deserunt necessitatibus? Adipisci laudantium eligendi quisquam nobis eos voluptatum repellat. Ab, eum id assumenda provident asperiores unde est esse dolorum repellat aliquam doloremque voluptatibus amet sunt laborum iure tempore libero eaque
ratione vitae eos suscipit similique facilis! Voluptate dolore ipsum, magnam facere, ratione ipsa nesciunt dolores, totam debitis optio expedita. Officia adipisci totam quos reprehenderit, magni, qui nostrum, fugiat sunt est error eos tempora facere
reiciendis molestiae ex doloremque voluptatibus at perferendis. Maiores impedit commodi reprehenderit facere voluptas quae fuga nihil magnam. Deserunt vero dolor possimus harum aliquam fuga eius accusamus optio ad velit voluptate sunt corporis praesentium,
voluptates alias repudiandae? Aut ex quisquam atque sapiente laborum perferendis et, ad vero fugit corporis alias facilis hic, magnam debitis deserunt quis voluptatem soluta ducimus ipsa accusamus, numquam tempore error aliquam ut tempora. Distinctio
ipsam unde quasi illum laborum possimus odio harum similique nobis? Distinctio explicabo nisi saepe, animi assumenda eius vel enim libero. Perferendis sequi est eaque porro autem architecto in nulla quod eius ratione accusantium obcaecati, quibusdam
beatae vitae harum nihil, quae quidem soluta. Repellendus et dolor laboriosam, maiores totam magni cupiditate quo ipsum autem aperiam doloribus, fuga quod, odio dolorem. Odio sed quod obcaecati reprehenderit aliquam cum, distinctio voluptatibus alias!
Necessitatibus enim quam, placeat dicta? Nulla neque recusandae ipsam nostrum asperiores magni eius rerum voluptatem, quod, dolor reiciendis necessitatibus itaque officiis, fuga nam assumenda pariatur. Minima, enim. Molestiae quae asperiores culpa!
Dolores at, nam earum debitis vitae ipsa ratione officiis, magni neque pariatur ipsam, laborum tempore accusantium eius magnam natus? Natus possimus, numquam deleniti quibusdam quaerat minima sint nobis, minus tempore incidunt repellendus temporibus,
neque mollitia consequuntur. Totam veritatis architecto, rem asperiores culpa dolor assumenda! Incidunt minus nam sequi quas ut deleniti molestiae similique sint nulla dignissimos libero magnam, quaerat, odio dolore error iure exercitationem eos et
itaque. At velit quibusdam sequi distinctio expedita aperiam, asperiores accusamus laboriosam doloribus odio, culpa, ullam ab. Earum inventore repellat fugiat, distinctio est vero magni, quia hic. Repellendus eos sapiente, totam libero dolorem praesentium
voluptatum, placeat fugit blanditiis fugiat saepe asperiores sunt, ducimus nemo distinctio aut tempora odit vero nesciunt eaque aliquid adipisci! Voluptas, autem omnis sapiente harum quas in veniam. Fugiat cum vel nemo perspiciatis temporibus asperiores
adipisci! Nobis neque nemo vero suscipit iure, est consectetur eos odit! Obcaecati illum voluptatem facilis, quos fugiat quo est minus, hic, magni error consequuntur quibusdam! Dicta incidunt non odio rerum ducimus officiis animi voluptate, excepturi
id, pariatur illum repudiandae voluptatem at asperiores alias dolor facere. Enim natus expedita tenetur fugiat, aliquid, voluptatem beatae sed sint perspiciatis distinctio! Perspiciatis quibusdam fugit repellendus, facere nihil tempora minima repudiandae
ad ducimus ullam sit necessitatibus inventore sequi qui, totam unde quo. Quia beatae animi ea similique placeat unde corporis, amet odit iure magnam, modi quibusdam id totam fugit. Ipsa ad nisi quibusdam laboriosam adipisci beatae delectus deleniti
quod ratione porro minus sapiente, sint dicta mollitia. Doloribus quasi ipsam atque, quisquam, esse cumque praesentium, velit est repellendus explicabo aut suscipit harum repudiandae veniam, ratione odio quia necessitatibus dicta optio obcaecati dignissimos.
Velit perspiciatis praesentium similique explicabo officiis, totam labore. Quaerat facere, voluptatem ab quo sed voluptates. Est sunt ratione non iste consequatur impedit sint optio, provident inventore, deserunt hic, eum. Distinctio molestias dolores,
eligendi nam enim rem atque quasi harum amet, quaerat quis, nostrum praesentium voluptas quos aperiam explicabo quae eaque maxime alias! Laboriosam quo optio esse dicta quae, voluptatem architecto voluptas, numquam adipisci itaque labore placeat tempore
atque expedita blanditiis sunt dignissimos, maiores qui pariatur. Ipsum dignissimos nulla inventore alias blanditiis corrupti illum ea, est quidem tempora id molestias, facere accusamus cupiditate et dolorum aliquam doloribus magnam placeat quia asperiores!
Nobis architecto minima ullam tempore, ad, velit at id adipisci praesentium reprehenderit ut sunt consectetur sapiente quod enim expedita beatae neque autem modi natus? Culpa qui minus ipsam corporis officiis natus cumque repellat soluta deleniti
odit dolor numquam, nihil expedita veniam, voluptate dolorem velit quia voluptas aut hic. Officia omnis iure distinctio nostrum beatae magni quo minus quam voluptates corporis. Nobis impedit dolore consectetur necessitatibus delectus esse tempore
explicabo repellat modi at praesentium ut iusto, excepturi maxime ipsa blanditiis in obcaecati fugiat, voluptatibus, consequuntur quasi corporis suscipit. Laboriosam quibusdam beatae, repellat amet molestiae illo! Consequatur nostrum, ipsa enim. Blanditiis
quas pariatur odit doloremque perspiciatis nesciunt ullam, possimus eaque a enim nihil ipsa, laborum labore illum natus aut deserunt, unde. Sequi rerum quam architecto tempore quidem nihil dicta dolor, quia harum ratione voluptatibus id tempora dolorem
aliquam, accusamus consequatur, doloremque ut assumenda. Repellat, adipisci dolores quam molestias temporibus, voluptatem aliquam voluptas voluptates repellendus vero quaerat fugiat iste neque enim beatae pariatur quisquam, ea nisi alias. Doloremque
cum qui officia sunt perferendis quibusdam placeat recusandae dolore natus provident aspernatur rem, unde in quaerat repellendus labore iusto porro sit non iure, ab perspiciatis sapiente possimus reiciendis? Blanditiis natus dolor similique, asperiores
molestiae explicabo iure! Deserunt eaque error, amet quae reprehenderit soluta voluptas ratione distinctio sunt voluptatem temporibus repudiandae id rem corporis eum doloremque et, expedita qui quidem obcaecati ipsa commodi doloribus! Rerum accusantium
facilis molestiae mollitia fuga doloribus officia omnis provident nulla soluta dignissimos atque maiores quod sit alias quasi aut nisi odit dolore, est temporibus a labore earum vel excepturi! Quo consequuntur magni labore voluptatem quia facere,
nesciunt facilis laudantium deserunt accusantium velit numquam dolor placeat sunt modi, illum commodi! Ullam harum debitis maiores possimus odit delectus repellat sed nostrum aspernatur distinctio, modi provident ad perspiciatis ipsa, ratione, ipsam
rerum. Qui autem dicta sed, quod dolores mollitia doloremque molestias aliquam asperiores cupiditate, ab, nostrum velit est id officiis tempore! Quia architecto ullam quaerat magni, dolor minus. Neque consequatur rem amet dolorem nulla aliquid repudiandae,
aliquam! Tempora voluptatum hic facere, reprehenderit fuga, autem quod libero qui, quas nihil impedit dolore odit nobis aperiam. Ab at laudantium alias, ad architecto aut. Ut nostrum sequi debitis fugiat recusandae delectus saepe deleniti quidem dolorum
eos tempore animi nihil officiis earum quos ex, et similique explicabo consectetur, voluptates? Suscipit, doloribus consequatur sed! Non quasi, eum impedit harum dignissimos sed maiores ad temporibus at quas reprehenderit laudantium officia, repellendus
dolorem tempora fugiat mollitia, vel, quos natus ratione aliquid accusantium! Rerum et dicta quas labore, possimus odit voluptatum expedita, tempora modi adipisci aut.
</div>
<div class="sidebar">
<div class="sidebar__inner">
<div class="box">first box</div>
<div class="box">2nd box</div>
<div class="box"> 3rd box</div>
<div class="box">last box</div>
</div>
</div>
</div>
I have a page layout of an header, a sidebar, and a main content. I'm using flexbox to create the layout but I want only the main content to be scrollable.
* {
box-sizing: border-box;
margin: 0;
}
header {
height: 30px;
background: #000;
}
div {
display: flex;
}
aside {
width: 200px;
background: red;
height: calc(100vh - 30px);
overflow: auto;
}
.main {
flex: 1;
}
<main>
<header>
header
</header>
<div>
<aside>Sidebar</aside>
<section class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ducimus odit optio dicta placeat dolore beatae dolorum quos corporis vitae aliquid enim cumque aperiam molestiae eligendi a omnis, magni sint!
Voluptatum facere minima nulla atque quis, consequuntur minus excepturi! Id nesciunt ullam inventore commodi adipisci iure recusandae temporibus placeat perspiciatis consequuntur voluptatum ex, sint non cumque eos libero quis. Qui.
Ea ut alias, quasi recusandae unde maiores reiciendis corrupti at natus eligendi et, quas adipisci consectetur iusto eum perspiciatis rem nesciunt illum magni incidunt cum aperiam quos ipsum! Officia, autem.
Laudantium dolorem aliquid, distinctio possimus molestiae voluptates quis. Repudiandae eius id perferendis minima fugit quam, placeat saepe quae? Libero delectus corporis soluta debitis explicabo, rerum odit aliquam. Voluptatibus, delectus? Quia!
Illo, quo excepturi eveniet sint veritatis et sunt voluptas? Autem recusandae dolores totam exercitationem distinctio minima, eaque soluta saepe sint blanditiis sequi deleniti quibusdam facere reprehenderit, debitis fuga quas suscipit!
Temporibus, quam amet, ab modi assumenda minus esse, impedit vitae accusamus et ipsa! Amet quis cum labore minima corporis! Harum incidunt quae voluptas fugiat quod aut earum unde, reiciendis aspernatur.
Magni sequi doloremque, facilis iste quasi sed repudiandae repellat cum voluptas repellendus beatae ullam asperiores voluptatem cupiditate voluptatibus architecto tempora deleniti aperiam mollitia sint praesentium in! Mollitia nemo modi perferendis!
Architecto quos vel voluptate maxime iste quis impedit nam nostrum earum suscipit. A quidem repellendus exercitationem voluptatum magni facilis repellat impedit dignissimos adipisci quaerat non, doloremque laudantium neque, ipsum minima.
Explicabo nobis fugit quaerat, deleniti fuga natus, architecto minima ipsam vitae dicta, beatae voluptatem. Numquam accusamus error ducimus ut culpa maiores eveniet necessitatibus. Quo autem recusandae praesentium officia dolorem pariatur?
Deleniti voluptatem similique, rem qui exercitationem, aut fuga consequuntur pariatur quibusdam cupiditate amet vero et id hic recusandae nesciunt fugit. Doloribus est ducimus necessitatibus maiores expedita pariatur obcaecati omnis ut!
Amet itaque ut sed? Hic facilis voluptatum nulla necessitatibus nihil optio distinctio rerum omnis temporibus vero similique repellendus eveniet in velit illo obcaecati repellat aliquid possimus aspernatur, quo libero molestias.
Eaque sequi dolorum modi error cumque repellat excepturi sint, accusantium minima aspernatur quam quas expedita quae recusandae voluptatum nulla dolor ratione sit autem et perferendis. Laudantium sint est unde consectetur.
Nostrum saepe inventore nam commodi provident, repellat praesentium molestias doloribus optio porro quibusdam est voluptates labore quod at soluta mollitia, placeat, aut eos excepturi maiores ab. Fugiat nemo facilis illo?
Harum corporis inventore esse, tempora ipsum, sit necessitatibus eaque in mollitia voluptates dolorum doloremque natus ab. Quasi consequatur veniam voluptate obcaecati dolorem fuga omnis quibusdam numquam dignissimos et! A, rem.
Dolorem nihil placeat non, est odio temporibus eum voluptate mollitia, reprehenderit rem vero officiis beatae consequuntur quos cupiditate nobis aliquid iure quidem ducimus impedit ex illo necessitatibus. Qui, magnam ea!
Earum quae unde dolorem molestias at itaque magni doloremque consequuntur! Voluptatem odio dolorum, ea optio nihil deserunt eius tempore nisi. Doloremque reprehenderit non, harum eius commodi necessitatibus voluptas. Reiciendis, ratione?
Omnis fugit dignissimos esse magni rem doloremque quisquam deleniti iusto ut impedit laudantium error ab earum minima qui culpa ipsa rerum, quam, perferendis veritatis! Ut voluptatum tempore asperiores expedita voluptate.
Harum molestiae natus sapiente libero, voluptatum vero unde aut consequuntur tempore voluptatibus minima iure earum accusantium quaerat nesciunt dolorum fugiat repellat numquam et neque aliquam. Blanditiis modi illo facere autem?
Aliquid ut nam laboriosam officia qui tempora pariatur delectus, consectetur sapiente ipsum hic ab alias? Numquam aut doloribus veritatis amet quos veniam eos. Quidem laborum qui exercitationem dignissimos eaque officiis?
Fuga magni provident, excepturi, unde saepe architecto ad eum maxime amet nesciunt laudantium? Ea obcaecati reprehenderit cum sit suscipit minus dolore porro reiciendis dicta? Iusto officiis nam modi dolorem beatae.
</section>
</div>
</main>
How can I do this?
Just add it to your CSS
.main {
flex: 1;
max-height: calc(100vh - 30px);
overflow-y: auto;
}
you can add overflow Property
here is an example
body{
overflow :hidden;
}
.main {
flex: 1;
overflow-y:scroll;
height : 250px;
}
You can try the below code.
* {
box-sizing: border-box;
margin: 0;
}
header {
position: fixed;
width: 100%;
height: 30px;
background: #777;
}
div {
display: flex;
}
aside {
position: fixed;
margin-top: 30px;
width: 200px;
background: red;
height: calc(100vh - 30px);
overflow: auto;
}
.main {
margin-top: 30px;
margin-left: 200px;
flex: 1;
}
<main>
<header>
header
</header>
<div>
<aside>Sidebar</aside>
<section class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ducimus odit optio dicta placeat dolore beatae dolorum quos corporis vitae aliquid enim cumque aperiam molestiae eligendi a omnis, magni sint!
Voluptatum facere minima nulla atque quis, consequuntur minus excepturi! Id nesciunt ullam inventore commodi adipisci iure recusandae temporibus placeat perspiciatis consequuntur voluptatum ex, sint non cumque eos libero quis. Qui.
Ea ut alias, quasi recusandae unde maiores reiciendis corrupti at natus eligendi et, quas adipisci consectetur iusto eum perspiciatis rem nesciunt illum magni incidunt cum aperiam quos ipsum! Officia, autem.
Laudantium dolorem aliquid, distinctio possimus molestiae voluptates quis. Repudiandae eius id perferendis minima fugit quam, placeat saepe quae? Libero delectus corporis soluta debitis explicabo, rerum odit aliquam. Voluptatibus, delectus? Quia!
Illo, quo excepturi eveniet sint veritatis et sunt voluptas? Autem recusandae dolores totam exercitationem distinctio minima, eaque soluta saepe sint blanditiis sequi deleniti quibusdam facere reprehenderit, debitis fuga quas suscipit!
Temporibus, quam amet, ab modi assumenda minus esse, impedit vitae accusamus et ipsa! Amet quis cum labore minima corporis! Harum incidunt quae voluptas fugiat quod aut earum unde, reiciendis aspernatur.
Magni sequi doloremque, facilis iste quasi sed repudiandae repellat cum voluptas repellendus beatae ullam asperiores voluptatem cupiditate voluptatibus architecto tempora deleniti aperiam mollitia sint praesentium in! Mollitia nemo modi perferendis!
Architecto quos vel voluptate maxime iste quis impedit nam nostrum earum suscipit. A quidem repellendus exercitationem voluptatum magni facilis repellat impedit dignissimos adipisci quaerat non, doloremque laudantium neque, ipsum minima.
Explicabo nobis fugit quaerat, deleniti fuga natus, architecto minima ipsam vitae dicta, beatae voluptatem. Numquam accusamus error ducimus ut culpa maiores eveniet necessitatibus. Quo autem recusandae praesentium officia dolorem pariatur?
Deleniti voluptatem similique, rem qui exercitationem, aut fuga consequuntur pariatur quibusdam cupiditate amet vero et id hic recusandae nesciunt fugit. Doloribus est ducimus necessitatibus maiores expedita pariatur obcaecati omnis ut!
Amet itaque ut sed? Hic facilis voluptatum nulla necessitatibus nihil optio distinctio rerum omnis temporibus vero similique repellendus eveniet in velit illo obcaecati repellat aliquid possimus aspernatur, quo libero molestias.
Eaque sequi dolorum modi error cumque repellat excepturi sint, accusantium minima aspernatur quam quas expedita quae recusandae voluptatum nulla dolor ratione sit autem et perferendis. Laudantium sint est unde consectetur.
Nostrum saepe inventore nam commodi provident, repellat praesentium molestias doloribus optio porro quibusdam est voluptates labore quod at soluta mollitia, placeat, aut eos excepturi maiores ab. Fugiat nemo facilis illo?
Harum corporis inventore esse, tempora ipsum, sit necessitatibus eaque in mollitia voluptates dolorum doloremque natus ab. Quasi consequatur veniam voluptate obcaecati dolorem fuga omnis quibusdam numquam dignissimos et! A, rem.
Dolorem nihil placeat non, est odio temporibus eum voluptate mollitia, reprehenderit rem vero officiis beatae consequuntur quos cupiditate nobis aliquid iure quidem ducimus impedit ex illo necessitatibus. Qui, magnam ea!
Earum quae unde dolorem molestias at itaque magni doloremque consequuntur! Voluptatem odio dolorum, ea optio nihil deserunt eius tempore nisi. Doloremque reprehenderit non, harum eius commodi necessitatibus voluptas. Reiciendis, ratione?
Omnis fugit dignissimos esse magni rem doloremque quisquam deleniti iusto ut impedit laudantium error ab earum minima qui culpa ipsa rerum, quam, perferendis veritatis! Ut voluptatum tempore asperiores expedita voluptate.
Harum molestiae natus sapiente libero, voluptatum vero unde aut consequuntur tempore voluptatibus minima iure earum accusantium quaerat nesciunt dolorum fugiat repellat numquam et neque aliquam. Blanditiis modi illo facere autem?
Aliquid ut nam laboriosam officia qui tempora pariatur delectus, consectetur sapiente ipsum hic ab alias? Numquam aut doloribus veritatis amet quos veniam eos. Quidem laborum qui exercitationem dignissimos eaque officiis?
Fuga magni provident, excepturi, unde saepe architecto ad eum maxime amet nesciunt laudantium? Ea obcaecati reprehenderit cum sit suscipit minus dolore porro reiciendis dicta? Iusto officiis nam modi dolorem beatae.
</section>
</div>
</main>
Put your text in p tag like below.
<main>
<header>
header
</header>
<div>
<aside>Sidebar</aside>
<section class="main">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ducimus odit optio dicta placeat dolore beatae dolorum quos corporis vitae aliquid enim cumque aperiam molestiae eligendi a omnis, magni sint!
Voluptatum facere minima nulla atque quis, consequuntur minus excepturi! Id nesciunt ullam inventore commodi adipisci iure recusandae temporibus placeat perspiciatis consequuntur voluptatum ex, sint non cumque eos libero quis. Qui.
Ea ut alias, quasi recusandae unde maiores reiciendis corrupti at natus eligendi et, quas adipisci consectetur iusto eum perspiciatis rem nesciunt illum magni incidunt cum aperiam quos ipsum! Officia, autem.
Laudantium dolorem aliquid, distinctio possimus molestiae voluptates quis. Repudiandae eius id perferendis minima fugit quam, placeat saepe quae? Libero delectus corporis soluta debitis explicabo, rerum odit aliquam. Voluptatibus, delectus? Quia!
Illo, quo excepturi eveniet sint veritatis et sunt voluptas? Autem recusandae dolores totam exercitationem distinctio minima, eaque soluta saepe sint blanditiis sequi deleniti quibusdam facere reprehenderit, debitis fuga quas suscipit!
Temporibus, quam amet, ab modi assumenda minus esse, impedit vitae accusamus et ipsa! Amet quis cum labore minima corporis! Harum incidunt quae voluptas fugiat quod aut earum unde, reiciendis aspernatur.
Magni sequi doloremque, facilis iste quasi sed repudiandae repellat cum voluptas repellendus beatae ullam asperiores voluptatem cupiditate voluptatibus architecto tempora deleniti aperiam mollitia sint praesentium in! Mollitia nemo modi perferendis!
Architecto quos vel voluptate maxime iste quis impedit nam nostrum earum suscipit. A quidem repellendus exercitationem voluptatum magni facilis repellat impedit dignissimos adipisci quaerat non, doloremque laudantium neque, ipsum minima.
Explicabo nobis fugit quaerat, deleniti fuga natus, architecto minima ipsam vitae dicta, beatae voluptatem. Numquam accusamus error ducimus ut culpa maiores eveniet necessitatibus. Quo autem recusandae praesentium officia dolorem pariatur?
Deleniti voluptatem similique, rem qui exercitationem, aut fuga consequuntur pariatur quibusdam cupiditate amet vero et id hic recusandae nesciunt fugit. Doloribus est ducimus necessitatibus maiores expedita pariatur obcaecati omnis ut!
Amet itaque ut sed? Hic facilis voluptatum nulla necessitatibus nihil optio distinctio rerum omnis temporibus vero similique repellendus eveniet in velit illo obcaecati repellat aliquid possimus aspernatur, quo libero molestias.
Eaque sequi dolorum modi error cumque repellat excepturi sint, accusantium minima aspernatur quam quas expedita quae recusandae voluptatum nulla dolor ratione sit autem et perferendis. Laudantium sint est unde consectetur.
Nostrum saepe inventore nam commodi provident, repellat praesentium molestias doloribus optio porro quibusdam est voluptates labore quod at soluta mollitia, placeat, aut eos excepturi maiores ab. Fugiat nemo facilis illo?
Harum corporis inventore esse, tempora ipsum, sit necessitatibus eaque in mollitia voluptates dolorum doloremque natus ab. Quasi consequatur veniam voluptate obcaecati dolorem fuga omnis quibusdam numquam dignissimos et! A, rem.
Dolorem nihil placeat non, est odio temporibus eum voluptate mollitia, reprehenderit rem vero officiis beatae consequuntur quos cupiditate nobis aliquid iure quidem ducimus impedit ex illo necessitatibus. Qui, magnam ea!
Earum quae unde dolorem molestias at itaque magni doloremque consequuntur! Voluptatem odio dolorum, ea optio nihil deserunt eius tempore nisi. Doloremque reprehenderit non, harum eius commodi necessitatibus voluptas. Reiciendis, ratione?
Omnis fugit dignissimos esse magni rem doloremque quisquam deleniti iusto ut impedit laudantium error ab earum minima qui culpa ipsa rerum, quam, perferendis veritatis! Ut voluptatum tempore asperiores expedita voluptate.
Harum molestiae natus sapiente libero, voluptatum vero unde aut consequuntur tempore voluptatibus minima iure earum accusantium quaerat nesciunt dolorum fugiat repellat numquam et neque aliquam. Blanditiis modi illo facere autem?
Aliquid ut nam laboriosam officia qui tempora pariatur delectus, consectetur sapiente ipsum hic ab alias? Numquam aut doloribus veritatis amet quos veniam eos. Quidem laborum qui exercitationem dignissimos eaque officiis?
Fuga magni provident, excepturi, unde saepe architecto ad eum maxime amet nesciunt laudantium? Ea obcaecati reprehenderit cum sit suscipit minus dolore porro reiciendis dicta? Iusto officiis nam modi dolorem beatae.
</p>
</section>
</div>
</main>
Give p tag fixed height set its overflow property to scroll like below.
p {
overflow: scroll;
height: 400px;
}
Add this :
.main {
height: calc(100vh - 30px);
overflow: scroll;
}
The position sticky will keep it always to the left.
* {
box-sizing: border-box;
margin: 0;
}
header {
height: 30px;
background: #000;
}
div {
width: 100%;
display: flex;
position: relative;
}
aside {
width: 20%;
background: red;
height: calc(100vh - 30px);
position: sticky;
left: 0;
top:0;
}
.main {
flex:1;
width: 70%;
}
I have this modal solution I came up with. It works fine in Chrome and Edge, but there is a flaw in Firefox browser.
If the modal is higher than the screen the full modal should be scrollable, while the body should be not. Alas, I can only scroll the modal using the scrollbar to the right, but not with the mouse wheel.
Edit
This works fine in Firefox browser on stackoverflow, but the same code on codepen debug doesn't work!
console.clear();
;(function(d) {
"use strict";
d.addEventListener('click', function(e) {
var el = e.target.closest('[data-modal-trigger]')
if (el) {
var selector = el.dataset.modalTrigger;
Array.from(d.querySelectorAll(selector)).forEach(function(el) {
el.classList.add('active');
})
d.documentElement.classList.add('with-modal')
}
var el1 = e.target.closest('.modal-close');
var el2 = e.target.closest('.modal-backdrop');
if (el1 || el2) {
e.target.closest('.modal').classList.remove('active')
d.documentElement.classList.remove('with-modal')
}
})
})(document);
html.with-modal body {
height: 100vh;
overflow-y: hidden;
padding-right: 17px;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2000;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0s 1s;
transition: opacity 0s 1s;
overflow-y: scroll;
}
.modal.active {
opacity: 1;
-webkit-transition: opacity 0s;
transition: opacity 0s;
pointer-events: all;
}
.modal-backdrop {
z-index: -1;
position: fixed;
top: 0;
right: 17px;
bottom: 0;
left: 0;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
-webkit-transition: opacity 0.2s 0.3s linear;
transition: opacity 0.2s 0.3s linear;
pointer-events: none;
}
.modal.active .modal-backdrop {
opacity: 1;
pointer-events: all;
}
.modal-window {
background-color: #fff;
flex-basis: auto;
width: auto;
-webkit-box-flex: 0;
flex-grow: 0;
flex-shrink: 1;
border: 1px solid;
position: relative;
top: 25px;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
margin: auto;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-align: stretch;
align-items: stretch;
padding: 20px;
opacity: 0;
}
.modal.active .modal-window {
flex-basis: content;
top: 0;
opacity: 1;
}
.modal-content {
-webkit-box-flex: 1;
flex-grow: 1;
flex-basis: 100%;
}
.modal-close {
flex-basis: 40px;
padding: 10px;
box-sizing: border-box;
background-color: pink;
margin-left: auto;
color: red;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
cursor: pointer;
}
button {
border: 2px solid;
border-radius: 10px;
padding: 10px 20px;
background-color: lightgreen;
font-size: 20px;
margin: auto;
text-align: center;
}
<button data-modal-trigger="#my-modal">Click for modal</button>
<div class="region-modal">
<div class="modal" id="my-modal">
<div class="modal-window">
<div class="modal-close">Close</div>
<div class="modal-content">
<h2>My Modal</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos voluptatibus asperiores dolorem dicta veniam? Voluptatum reprehenderit maxime in perferendis sequi?</p>
<p>Id odit doloribus culpa perspiciatis reprehenderit pariatur labore magni fuga eos. Ipsum hic consequuntur delectus? Sapiente tempore dolorem eos aliquid!</p>
<p>Voluptatibus enim velit quasi vitae dolor sapiente ab excepturi iste, quos adipisci id ad quidem atque omnis amet! Eos, eligendi.</p>
<p>Nam culpa quo incidunt quaerat iure itaque, porro hic aperiam ducimus? Vel tempora unde nulla quisquam nisi facere expedita deserunt.</p>
<p>Sunt, minus tempore dignissimos pariatur eos modi at minima culpa nisi debitis ipsam nihil recusandae illum unde magni hic sint!</p>
<p>Veritatis minima excepturi nisi! Ex consectetur, asperiores iste laudantium voluptatem enim, possimus quae porro modi corporis pariatur, non est ratione!</p>
<p>Est consequatur amet dignissimos quibusdam veniam? Commodi qui voluptatum facilis hic? Quasi itaque illo facilis reiciendis, soluta sit maxime delectus?</p>
<p>Explicabo eos neque dolore similique illo illum soluta nulla eveniet! Facilis et ipsa quia asperiores vitae, dignissimos adipisci necessitatibus sed.</p>
<p>Corporis cumque est, nihil omnis possimus consequatur recusandae magnam quod, officia aut odio dolores distinctio nostrum et vitae, consequuntur provident?</p>
<p>Ipsam, quisquam ea magnam autem possimus, rem tempore doloribus, in amet ullam debitis facilis tenetur voluptas labore. Aperiam, quam libero?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, accusantium.</p>
<p>Numquam ea sint debitis voluptatem fuga tempore repudiandae architecto minima.</p>
<p>Quidem explicabo consequatur obcaecati quia nisi quisquam! Eligendi, vero dolor.</p>
<p>Eum cumque perspiciatis praesentium quae provident nobis, excepturi inventore culpa?</p>
<p>Veniam doloremque cupiditate repellat totam, dignissimos unde eaque mollitia a.</p>
<p>Dignissimos consequatur voluptatibus provident velit! Ea voluptas quia iste saepe?</p>
<p>Saepe, fugit cupiditate possimus enim veritatis repudiandae molestias accusamus iure?</p>
<p>Illo unde obcaecati repellendus tenetur, quam doloremque commodi voluptas sit?</p>
<p>Quibusdam velit enim totam amet quasi aperiam repudiandae beatae quia.</p>
<p>Corrupti repellat deleniti aliquid exercitationem! Magni repellendus ipsum quas minus.</p>
<p>Dolor nesciunt ducimus corporis illo dolores deleniti asperiores numquam inventore?</p>
<p>Ratione omnis cum labore consectetur sequi quam, facere qui rem.</p>
<p>Ratione nostrum quia ex quod debitis distinctio iure eligendi eum!</p>
<p>Sunt repudiandae omnis accusantium quidem ipsam corrupti ipsa at vel!</p>
<p>A quasi fugit animi ullam. Dolor dolore incidunt libero velit.</p>
<p>Optio ducimus officia dolor quis, consectetur numquam blanditiis asperiores magnam?</p>
<p>Porro aspernatur suscipit officiis veritatis a quo, earum eos sapiente!</p>
<p>Magnam hic veritatis at. Iste tempora fugit quaerat deserunt qui?</p>
<p>Temporibus excepturi iste harum recusandae aliquid omnis corporis rem iure.</p>
<p>Fugit aut placeat facere suscipit. Magni amet sunt omnis quisquam?</p>
</div>
</div>
<div class="modal-backdrop"></div>
</div>
</div>
<h1>Scroll and modal</h1>
<p>Some scrolling content</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam delectus excepturi, fuga adipisci, deserunt culpa recusandae doloremque debitis non doloribus magnam reprehenderit maxime aut quaerat quam possimus fugit, voluptatem ab beatae reiciendis aperiam error. Explicabo quas necessitatibus cum enim vitae! Dicta maxime ea nam iusto ab reprehenderit placeat blanditiis numquam quam voluptates itaque, commodi aliquid deleniti natus dolorum unde sint. In quasi incidunt iure, repudiandae reiciendis inventore voluptatem modi facilis tempora maxime atque reprehenderit minus dolores neque exercitationem? Quisquam animi alias laudantium esse dicta molestiae ullam ipsum delectus culpa nemo nobis deserunt id, dolore minus. Perferendis ratione libero voluptate tempore fugiat modi, excepturi labore unde soluta ipsa asperiores molestias, corporis sapiente voluptatem distinctio nobis architecto. Ut facere sapiente ipsam inventore tempore architecto tempora officiis, laboriosam natus ea itaque consequatur. Error eum repellendus, perferendis deleniti qui quam voluptatem sint in sapiente eaque illo facilis minus ducimus ex officiis laudantium officia soluta suscipit debitis, recusandae eligendi, unde consectetur facere quasi. Neque corrupti asperiores deserunt eos corporis minima ex. Et a fuga in porro aspernatur quis veniam, repudiandae voluptatum eligendi cumque delectus, iusto voluptatem fugit maiores molestiae vel dolore impedit error. Vitae illo doloremque error totam id et veritatis earum eligendi placeat iste!</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Magni illo animi maxime deleniti dolorem a, reprehenderit aut hic iure! Ipsam, eaque voluptates? Voluptates, cum porro. Rerum deserunt iste labore mollitia expedita doloribus reprehenderit eos quae ducimus debitis fugiat quasi molestias in illum accusamus quisquam ipsum dicta eius nemo modi, adipisci unde incidunt! Repellendus ad nihil fuga tempora nobis? Magni omnis, ea alias pariatur eligendi doloribus, adipisci laborum possimus maxime provident esse! Ullam similique ducimus quod unde culpa ipsa illum nisi aut aspernatur consequuntur assumenda neque nihil quam ipsum, eius suscipit eligendi. Optio est, illo aut reiciendis alias corporis! Dolorum omnis facilis similique labore ab laboriosam repudiandae magnam voluptatibus, iusto praesentium! Illum laudantium consectetur molestiae nulla voluptatibus consequuntur? Quas natus iure harum praesentium deleniti rem fuga quidem, sit sequi. Quod consequatur voluptatibus quas unde officia laborum expedita quaerat vero, facilis, nemo excepturi nobis iure repellat explicabo eius atque accusamus ex tempore. Cumque aliquam mollitia, provident iste quasi maxime, quod voluptatum fugit at accusantium vitae. Aperiam soluta nobis iusto incidunt non aspernatur nihil cumque eum vero commodi animi in, quasi deleniti doloremque earum reprehenderit officiis praesentium. Totam illum quod dolorum sequi placeat temporibus odit quis, doloribus ratione repellendus? Itaque et fuga illo cumque aliquam voluptatem magni laudantium fugiat nemo obcaecati.</p>
<p>Est iure, laboriosam sint quibusdam corrupti magni a minus repudiandae, incidunt autem consequuntur dolorem cumque eaque, nulla facere illum veritatis. Voluptatibus rerum fugiat iusto hic animi distinctio. Officiis, atque. Laboriosam excepturi iure quaerat exercitationem architecto optio laudantium, id amet dolores fugit ullam harum itaque nesciunt, at enim neque quam consectetur eveniet! Libero ex quos pariatur quaerat esse quas dolore praesentium in ipsam ab aut at expedita nam a soluta consequatur ducimus iusto rem voluptate laborum, dolorum quod veniam? Nihil accusamus quis ratione nemo beatae provident sequi ea ipsam quia explicabo quasi molestias voluptatum eius nostrum, modi sunt voluptate! Perspiciatis vitae voluptatibus quos ea optio perferendis minus repellendus a, ut tempora maiores beatae! Tempora impedit nesciunt ab dolore odit ipsa quia soluta illum! Explicabo dolorem molestiae fuga blanditiis, fugit commodi vitae ab non! Itaque veniam facere pariatur eius saepe ipsam incidunt numquam deleniti similique tempora? Doloribus natus architecto nulla vitae ullam ipsam fugiat maiores officia deleniti a, iure asperiores esse velit alias culpa? Nisi obcaecati, iste sequi officiis aliquam aut commodi vitae consequatur ea molestias sint eligendi ut dolore eveniet consectetur laborum quos natus cum quia molestiae explicabo id. A excepturi cumque porro vero nulla voluptate harum atque animi deleniti voluptas?</p>
<p>Ipsa esse dolor, dicta quis quod hic fugit quaerat repudiandae nobis cum voluptatem expedita amet tempora sed atque repellendus, cumque consequuntur iste adipisci quae aliquam ex sapiente corrupti? Quia numquam obcaecati nesciunt. Nisi quis cupiditate obcaecati at, nesciunt quae ipsum repellendus distinctio facilis ut architecto repellat explicabo impedit hic ex recusandae cum excepturi quisquam beatae sint fugiat, laboriosam blanditiis ratione. Veritatis accusamus quis totam et dignissimos, deserunt cumque quisquam amet eveniet ratione error autem ipsa maxime ducimus, voluptate, architecto nemo incidunt molestiae id. Saepe necessitatibus ipsam ad atque ullam quisquam maxime, soluta nemo voluptates corrupti mollitia praesentium, aliquam rem facilis ipsum deserunt perspiciatis autem animi quia commodi possimus! Consequuntur in nam sit hic temporibus aliquam. Amet alias, nobis exercitationem, veritatis nesciunt sit necessitatibus doloremque fugiat ullam rerum quia libero. Iste quaerat, totam labore qui provident eum sunt dolorem fugit facere dolorum quasi rem! Iste velit obcaecati aliquam maxime totam animi, harum labore vitae quos voluptates culpa earum quo, quibusdam explicabo eius nesciunt assumenda nulla natus, quae non ut dolorum nemo hic! Neque blanditiis molestiae esse ad laudantium, cum nostrum non alias nihil! Neque nostrum quam iste commodi consequatur obcaecati quibusdam ipsa corporis ut exercitationem rerum minima, facere aspernatur praesentium vitae.</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Necessitatibus, deserunt vero aut reiciendis omnis adipisci in aspernatur officia exercitationem, fuga perferendis alias maxime eum odio! Officia, exercitationem? Magnam cum sequi at totam distinctio libero animi non doloribus odio quisquam commodi quaerat, culpa cupiditate voluptatum impedit sapiente reprehenderit odit aspernatur. Quasi mollitia saepe commodi tempora inventore adipisci voluptatem eius et aperiam nemo maiores ipsam corrupti, impedit numquam repudiandae illo voluptate! Error nihil repellendus numquam similique cum in assumenda eligendi accusantium, saepe, consequuntur repudiandae neque fugiat aperiam delectus vero eum atque! Hic nostrum deleniti quos rem velit ad pariatur sit recusandae distinctio corrupti, et fugiat. Beatae nobis obcaecati esse fugit at culpa consectetur, accusamus suscipit necessitatibus, maxime pariatur ipsa? Suscipit quaerat pariatur accusamus debitis vitae neque eos odio, quod qui ad, explicabo quae rem necessitatibus sunt corrupti deserunt minima voluptatem laudantium obcaecati illum aliquid velit doloremque molestias? Hic fuga debitis explicabo neque quaerat ratione est totam cumque eius tempore necessitatibus at eos, sequi veritatis perferendis numquam ducimus sit nisi iusto doloribus. Dolor a doloremque maiores ipsum expedita? Deleniti deserunt delectus iste iusto aspernatur quo, dolorem ipsum, modi nulla, accusamus quam a eius natus nisi id in neque explicabo nesciunt at harum labore eaque ratione molestias! Officiis delectus facere error tenetur?</p>
<p>Magni possimus necessitatibus voluptate nobis voluptatibus minima odio atque at neque similique natus, totam obcaecati harum qui? Vero molestiae laborum accusantium reprehenderit consectetur, nobis veniam ea praesentium vel soluta hic, dolore assumenda, accusamus fugit voluptatum totam delectus ut minima at autem nam dignissimos illum veritatis explicabo? Explicabo harum animi commodi adipisci ab totam expedita. Cum atque maiores perspiciatis. Similique eos commodi, rem, tenetur placeat reprehenderit unde fugit, qui at sed corrupti! Sapiente, minus sint possimus itaque facere, voluptate illo officiis nesciunt accusantium recusandae maxime blanditiis doloribus. Odit asperiores quis illo quasi obcaecati ipsa, commodi beatae labore voluptates, vel quo neque, enim reprehenderit iste rerum debitis quisquam! Esse, maiores atque! Maxime eligendi eaque delectus eum, aut necessitatibus ad? A, accusamus! Quos, harum pariatur nostrum delectus dolores corrupti, repellendus vel blanditiis rem laboriosam laudantium quam perspiciatis incidunt dignissimos voluptatibus, minus voluptas ducimus fugit veritatis similique. Repudiandae possimus autem quod! Repudiandae eos perferendis libero nihil, dolores harum. Dolorum eos eligendi sequi odit at molestias mollitia libero nemo illum, excepturi, in temporibus, necessitatibus velit officia nam quidem laudantium dolore delectus non aliquam. Hic libero earum consequatur maiores nesciunt sequi, atque reprehenderit ipsa quos odit unde aperiam omnis, vitae quod, laborum accusantium perspiciatis dolorum ratione?</p>
<p>Sunt dolore ratione excepturi tempore voluptatum voluptas consequatur reiciendis, harum eaque mollitia beatae natus dolorem dolorum atque at consequuntur quaerat. Mollitia, iusto dicta. Nulla ea dolores similique aliquid possimus, pariatur a saepe iusto aut veritatis voluptatibus assumenda animi nam nobis esse tempore, asperiores numquam maiores. Consequuntur saepe fugiat ipsum excepturi, non corporis eum aut dignissimos. Consequatur nesciunt laborum earum consectetur reprehenderit voluptate molestias quidem, deleniti quae tempore sequi. Tempora architecto a accusantium odio voluptates aliquam autem suscipit provident sit asperiores incidunt illum ducimus facilis, molestias, inventore mollitia! Atque provident odio soluta deserunt quisquam tenetur quae molestias magnam ex, sed culpa nulla fuga corporis vero maxime quidem mollitia facere. Illo et non perspiciatis consequatur nobis temporibus eveniet nulla aut quae animi facilis veritatis minus, recusandae fugiat odit atque! Natus beatae velit possimus repellendus, perspiciatis vero culpa voluptatem quia atque quos doloribus nostrum fuga cum ea. Accusamus officia numquam praesentium sapiente! Tenetur sed harum itaque maxime ea velit, dolor doloremque soluta natus libero tempore similique adipisci optio dolorem aut accusamus in ut vel quaerat, inventore veniam quis. Explicabo, ipsum temporibus saepe ad, libero consectetur adipisci amet quaerat placeat rem sit dolore fugiat cupiditate porro quod commodi expedita totam veniam. Reiciendis, consequuntur nostrum!</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Voluptas odit dicta laudantium temporibus unde nesciunt repellendus asperiores incidunt consectetur! Accusantium quis dolorum eveniet quos atque voluptas amet! Iure quo nam alias, veniam hic totam quia voluptates dolorem quibusdam eum fuga enim sunt laudantium velit, ducimus doloremque omnis quae delectus explicabo quis sed. Voluptate, eius fugiat odio minima sapiente ut illo error molestiae, repellat exercitationem nesciunt sit iste earum provident reprehenderit? A, distinctio. Cupiditate magni eius eligendi atque et rerum dicta illo sequi voluptates esse dolores, ducimus corporis laudantium in eos accusantium temporibus delectus vel quidem dolor repudiandae numquam libero officiis non? Commodi nostrum doloribus officiis hic doloremque, corporis rerum harum dolore eum quia voluptatibus inventore at sapiente consequatur laudantium quos quaerat vero? Voluptates modi ut totam aliquid laudantium consequuntur beatae odio tempore iusto officiis exercitationem, animi quos, dignissimos voluptatibus quas ad eaque. Nam, repellendus numquam veniam excepturi inventore iusto non accusantium eaque corporis laboriosam ipsa at modi recusandae atque perspiciatis. Ab doloribus animi unde eaque cumque esse, sint qui suscipit earum magni provident labore, velit, ipsam inventore veniam reiciendis officia voluptas sequi quisquam impedit? Ut laborum magnam a iusto? Assumenda quidem expedita laudantium vero! Quos soluta, magni nemo ipsa ratione incidunt eius nihil facilis? Rerum corporis iure eligendi.</p>
<p>Inventore obcaecati reprehenderit, corporis repellendus, possimus velit vel alias, id voluptate eaque voluptatem numquam eveniet nostrum? Ab vel, illo consectetur quas beatae repudiandae error vero quam dolorum quasi velit aut iure! Totam nemo perferendis velit quidem adipisci reprehenderit molestias optio pariatur doloremque reiciendis repellat repellendus blanditiis error a ratione laudantium nobis aliquam, dolorem numquam porro sapiente. Amet inventore corporis suscipit natus est sunt, laborum excepturi rerum, quasi sequi commodi placeat officiis nobis. Voluptate, error odit! Blanditiis laborum, nihil quo quas reprehenderit aspernatur cupiditate explicabo! Sint magnam nesciunt eligendi nostrum cumque, dolor saepe est quidem nihil consectetur, laborum soluta, accusamus doloremque. Rerum modi sapiente aliquam dolore itaque, voluptatibus tempore atque consequuntur maxime omnis recusandae quo quaerat laborum aspernatur possimus dolorem earum adipisci, non, excepturi quia! Iusto et repellendus inventore eligendi magnam, quae beatae numquam aliquam animi incidunt officia similique qui cumque. Fugit est deserunt rerum, assumenda eligendi, voluptatibus corporis sed qui minus doloribus officia esse sit sint earum veniam. Magnam ipsum ipsam aliquam doloribus magni a perspiciatis qui beatae blanditiis dolorum, aliquid nemo impedit omnis numquam expedita mollitia, quos assumenda necessitatibus quas. Ipsam rem voluptas delectus ipsa ratione! Optio, distinctio dicta. Unde id harum dolorem sed velit, impedit distinctio dignissimos error.</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Laborum exercitationem quas ex! Nostrum quaerat eaque itaque repudiandae expedita dolores sapiente quia non hic obcaecati, tempora error quo facilis ut quas adipisci voluptatum voluptate, qui temporibus! Eveniet corporis molestiae sapiente, omnis nostrum quod consectetur at error velit aspernatur vero non illum quidem voluptates laboriosam molestias! Porro nobis, soluta cum laboriosam dolore delectus amet reprehenderit adipisci! Quis enim praesentium officiis voluptatum quasi, totam corporis vero sit, laboriosam beatae, nam ab! Molestias id amet impedit maxime cupiditate iure officiis, ad ipsum ipsam excepturi corrupti praesentium velit repellendus quo facilis? Officia recusandae nobis nemo fugiat iste id explicabo asperiores non quis rerum tempora repellendus necessitatibus error unde quam ea ratione autem quaerat est hic quia deserunt, doloremque aspernatur. Quos inventore enim perspiciatis illum voluptatibus officia voluptas molestiae eveniet consectetur eos voluptatem, tempore necessitatibus eius mollitia reiciendis aut ullam aspernatur aliquid nihil expedita nisi accusantium sunt quam dolorum. Natus sit sequi itaque ut, ex, maiores aspernatur magni nostrum ad ratione assumenda qui hic? Similique molestiae aperiam quae laudantium pariatur quibusdam, quidem provident ducimus, modi blanditiis sed? Recusandae, iure? Nihil laborum rerum adipisci tenetur aspernatur quas asperiores. Deserunt amet, veniam doloremque pariatur nisi et quis commodi voluptates error cumque modi inventore optio, tempore fugiat.</p>
<p>Totam, quod et tenetur officiis consequuntur laboriosam provident dicta unde placeat, expedita ad sit voluptas molestiae ipsam voluptatibus omnis, magni id sunt esse modi distinctio exercitationem? Saepe unde repudiandae enim dolor explicabo possimus vel quisquam cumque. Minus dolorem vitae, qui at facilis dicta tenetur quos aut corrupti nisi doloremque asperiores ab sint hic, laudantium eveniet. Alias iste tempora obcaecati dignissimos delectus nesciunt tenetur mollitia eum architecto officiis quas odit, quo magni, beatae accusamus asperiores eius facere, corrupti provident earum dicta laboriosam blanditiis esse libero! Aspernatur omnis iste sit, magni facere possimus ea provident officiis rerum ducimus similique natus neque suscipit incidunt repellat perspiciatis, itaque iure. Pariatur nesciunt libero rerum inventore? Nobis aperiam, nostrum odio facilis id animi atque provident hic dolorem quas fugit earum velit ratione qui ipsam repellendus ut sit omnis facere libero ex neque? Provident error ducimus modi magnam fuga, ex eveniet omnis earum sed magni at asperiores harum, veniam quidem perferendis. Dicta ab voluptates ipsum quas expedita eligendi voluptate praesentium, consequuntur harum qui eum veniam maiores in molestiae aliquid, totam quod officiis asperiores ex necessitatibus. Saepe porro unde dicta beatae consectetur provident quidem suscipit, sed laborum sit, doloribus expedita mollitia aliquam adipisci necessitatibus pariatur veniam laudantium sequi?</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Aperiam, fugit ipsam. Minus quaerat nesciunt eum iure architecto, exercitationem laudantium corporis quos quam odio repellendus, accusamus qui dolor vitae numquam suscipit debitis, amet eaque perferendis quasi doloremque. Sit sapiente nihil corporis mollitia placeat tenetur eius fuga quisquam quam, dignissimos, possimus aspernatur. Praesentium magnam obcaecati, vitae deserunt inventore dolorem aspernatur impedit laboriosam quae deleniti nesciunt, animi amet totam est eum delectus incidunt id quisquam sapiente labore sint ad ipsa dignissimos. Officia ipsum quis minus sapiente corrupti quasi eius iste unde distinctio ducimus voluptatum vitae perferendis, iusto cupiditate optio laborum veniam ex dolorum, dolores omnis! Repellat perspiciatis quidem, molestiae reprehenderit a aliquam, modi obcaecati voluptatum, iste expedita itaque non. Error atque fugiat sunt ab. Ullam, ipsam id! Sunt fugit maxime incidunt illum reprehenderit deserunt qui iste quisquam natus labore eveniet ut porro ab eos commodi consequuntur eum delectus quaerat, molestias, architecto obcaecati. Unde aliquam exercitationem numquam corrupti recusandae autem ratione animi voluptas. Laborum adipisci aperiam consequuntur dolorum dolor aspernatur rerum cum impedit harum vel, animi quaerat, magnam consectetur optio sunt assumenda! Eius tenetur nam fugiat voluptatibus dignissimos ipsum, aperiam sint delectus ab, reiciendis in voluptatem tempore optio. Numquam mollitia quis vero sequi, nisi tempore fuga ducimus doloremque a nostrum, praesentium id.</p>
<p>Consequatur, velit, fuga harum nam quod commodi esse tempora laboriosam exercitationem reiciendis veniam, fugit expedita. Vitae, doloremque? Ex similique saepe perferendis iste autem veniam aliquid, harum minus? Molestias nobis eaque inventore saepe similique et vero autem eveniet repellendus. Excepturi magnam dignissimos, consectetur unde in expedita praesentium possimus consequuntur quaerat corporis beatae nobis minus. Molestias, harum ut! Dolores distinctio, quo placeat nam obcaecati cupiditate voluptatem nemo? A suscipit placeat quas iusto impedit. Libero ipsam excepturi ipsum quam, animi laboriosam sapiente nostrum necessitatibus quas ea pariatur error explicabo quos consectetur ullam nihil odit? Voluptatem animi repellat rem inventore, repudiandae saepe laborum culpa nihil deleniti corporis. Nostrum reprehenderit recusandae consectetur, quaerat autem natus vitae. Soluta nemo quisquam adipisci cupiditate similique architecto, quam ab corporis harum suscipit quo est, iusto quod earum modi necessitatibus, asperiores ratione sunt animi voluptatum? Eveniet, adipisci illo nemo pariatur ut nisi impedit sint debitis reiciendis nihil, illum dicta cupiditate quo quidem, est laborum minima fugit. Autem fuga eligendi necessitatibus obcaecati temporibus aspernatur, ullam deserunt illum nulla voluptatum mollitia, suscipit odio, placeat molestias. Ullam harum aliquid, voluptate est nam commodi tenetur ut repellat vel quaerat. Sed cupiditate voluptatibus eveniet non aspernatur consequuntur pariatur molestiae magnam, quis, dolorem nemo aperiam impedit.</p><button data-modal-trigger="#my-modal">Click for modal</button>
It is the pointer-events: all on the .modal-backdrop that hinders the scrolling, as somehow the scrollwheel events don't pass through.
I needed to change the JavaScript a little bit
/* ... */
/* CSS */
modal.active .modal-backdrop {
/* pointer-events: all */
}
/* ... */
// JavaScript
// ...
// var el2 = e.target.closest('.modal-backdrop');
// if (el1 || el2) {
var el2 = e.target.closest('.modal-window');
if (el1 || !el2) {
// ...
console.clear();
;(function(d) {
"use strict";
d.addEventListener('click', function(e) {
var el = e.target.closest('[data-modal-trigger]')
if (el) {
var selector = el.dataset.modalTrigger;
Array.from(d.querySelectorAll(selector)).forEach(function(el) {
el.classList.add('active');
})
d.documentElement.classList.add('with-modal')
}
var el1 = e.target.closest('.modal-close');
var el2 = e.target.closest('.modal-window');
if (el1 || !el2) {
e.target.closest('.modal').classList.remove('active')
d.documentElement.classList.remove('with-modal')
}
})
})(document);
html.with-modal body {
height: 100vh;
overflow-y: hidden;
padding-right: 17px;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2000;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0s 1s;
transition: opacity 0s 1s;
overflow-y: scroll;
}
.modal.active {
opacity: 1;
-webkit-transition: opacity 0s;
transition: opacity 0s;
pointer-events: all;
}
.modal-backdrop {
z-index: -1;
position: fixed;
top: 0;
right: 17px;
bottom: 0;
left: 0;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
-webkit-transition: opacity 0.2s 0.3s linear;
transition: opacity 0.2s 0.3s linear;
pointer-events: none;
}
.modal.active .modal-backdrop {
opacity: 1;
/* pointer-events: all; */
}
.modal-window {
background-color: #fff;
flex-basis: auto;
width: auto;
-webkit-box-flex: 0;
flex-grow: 0;
flex-shrink: 1;
border: 1px solid;
position: relative;
top: 25px;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
margin: auto;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-align: stretch;
align-items: stretch;
padding: 20px;
opacity: 0;
}
.modal.active .modal-window {
flex-basis: content;
top: 0;
opacity: 1;
}
.modal-content {
-webkit-box-flex: 1;
flex-grow: 1;
flex-basis: 100%;
}
.modal-close {
flex-basis: 40px;
padding: 10px;
box-sizing: border-box;
background-color: pink;
margin-left: auto;
color: red;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
cursor: pointer;
}
button {
border: 2px solid;
border-radius: 10px;
padding: 10px 20px;
background-color: lightgreen;
font-size: 20px;
margin: auto;
text-align: center;
}
<button data-modal-trigger="#my-modal">Click for modal</button>
<div class="region-modal">
<div class="modal" id="my-modal">
<div class="modal-window">
<div class="modal-close">Close</div>
<div class="modal-content">
<h2>My Modal</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos voluptatibus asperiores dolorem dicta veniam? Voluptatum reprehenderit maxime in perferendis sequi?</p>
<p>Id odit doloribus culpa perspiciatis reprehenderit pariatur labore magni fuga eos. Ipsum hic consequuntur delectus? Sapiente tempore dolorem eos aliquid!</p>
<p>Voluptatibus enim velit quasi vitae dolor sapiente ab excepturi iste, quos adipisci id ad quidem atque omnis amet! Eos, eligendi.</p>
<p>Nam culpa quo incidunt quaerat iure itaque, porro hic aperiam ducimus? Vel tempora unde nulla quisquam nisi facere expedita deserunt.</p>
<p>Sunt, minus tempore dignissimos pariatur eos modi at minima culpa nisi debitis ipsam nihil recusandae illum unde magni hic sint!</p>
<p>Veritatis minima excepturi nisi! Ex consectetur, asperiores iste laudantium voluptatem enim, possimus quae porro modi corporis pariatur, non est ratione!</p>
<p>Est consequatur amet dignissimos quibusdam veniam? Commodi qui voluptatum facilis hic? Quasi itaque illo facilis reiciendis, soluta sit maxime delectus?</p>
<p>Explicabo eos neque dolore similique illo illum soluta nulla eveniet! Facilis et ipsa quia asperiores vitae, dignissimos adipisci necessitatibus sed.</p>
<p>Corporis cumque est, nihil omnis possimus consequatur recusandae magnam quod, officia aut odio dolores distinctio nostrum et vitae, consequuntur provident?</p>
<p>Ipsam, quisquam ea magnam autem possimus, rem tempore doloribus, in amet ullam debitis facilis tenetur voluptas labore. Aperiam, quam libero?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, accusantium.</p>
<p>Numquam ea sint debitis voluptatem fuga tempore repudiandae architecto minima.</p>
<p>Quidem explicabo consequatur obcaecati quia nisi quisquam! Eligendi, vero dolor.</p>
<p>Eum cumque perspiciatis praesentium quae provident nobis, excepturi inventore culpa?</p>
<p>Veniam doloremque cupiditate repellat totam, dignissimos unde eaque mollitia a.</p>
<p>Dignissimos consequatur voluptatibus provident velit! Ea voluptas quia iste saepe?</p>
<p>Saepe, fugit cupiditate possimus enim veritatis repudiandae molestias accusamus iure?</p>
<p>Illo unde obcaecati repellendus tenetur, quam doloremque commodi voluptas sit?</p>
<p>Quibusdam velit enim totam amet quasi aperiam repudiandae beatae quia.</p>
<p>Corrupti repellat deleniti aliquid exercitationem! Magni repellendus ipsum quas minus.</p>
<p>Dolor nesciunt ducimus corporis illo dolores deleniti asperiores numquam inventore?</p>
<p>Ratione omnis cum labore consectetur sequi quam, facere qui rem.</p>
<p>Ratione nostrum quia ex quod debitis distinctio iure eligendi eum!</p>
<p>Sunt repudiandae omnis accusantium quidem ipsam corrupti ipsa at vel!</p>
<p>A quasi fugit animi ullam. Dolor dolore incidunt libero velit.</p>
<p>Optio ducimus officia dolor quis, consectetur numquam blanditiis asperiores magnam?</p>
<p>Porro aspernatur suscipit officiis veritatis a quo, earum eos sapiente!</p>
<p>Magnam hic veritatis at. Iste tempora fugit quaerat deserunt qui?</p>
<p>Temporibus excepturi iste harum recusandae aliquid omnis corporis rem iure.</p>
<p>Fugit aut placeat facere suscipit. Magni amet sunt omnis quisquam?</p>
</div>
</div>
<div class="modal-backdrop"></div>
</div>
</div>
<h1>Scroll and modal</h1>
<p>Some scrolling content</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam delectus excepturi, fuga adipisci, deserunt culpa recusandae doloremque debitis non doloribus magnam reprehenderit maxime aut quaerat quam possimus fugit, voluptatem ab beatae reiciendis aperiam error. Explicabo quas necessitatibus cum enim vitae! Dicta maxime ea nam iusto ab reprehenderit placeat blanditiis numquam quam voluptates itaque, commodi aliquid deleniti natus dolorum unde sint. In quasi incidunt iure, repudiandae reiciendis inventore voluptatem modi facilis tempora maxime atque reprehenderit minus dolores neque exercitationem? Quisquam animi alias laudantium esse dicta molestiae ullam ipsum delectus culpa nemo nobis deserunt id, dolore minus. Perferendis ratione libero voluptate tempore fugiat modi, excepturi labore unde soluta ipsa asperiores molestias, corporis sapiente voluptatem distinctio nobis architecto. Ut facere sapiente ipsam inventore tempore architecto tempora officiis, laboriosam natus ea itaque consequatur. Error eum repellendus, perferendis deleniti qui quam voluptatem sint in sapiente eaque illo facilis minus ducimus ex officiis laudantium officia soluta suscipit debitis, recusandae eligendi, unde consectetur facere quasi. Neque corrupti asperiores deserunt eos corporis minima ex. Et a fuga in porro aspernatur quis veniam, repudiandae voluptatum eligendi cumque delectus, iusto voluptatem fugit maiores molestiae vel dolore impedit error. Vitae illo doloremque error totam id et veritatis earum eligendi placeat iste!</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Magni illo animi maxime deleniti dolorem a, reprehenderit aut hic iure! Ipsam, eaque voluptates? Voluptates, cum porro. Rerum deserunt iste labore mollitia expedita doloribus reprehenderit eos quae ducimus debitis fugiat quasi molestias in illum accusamus quisquam ipsum dicta eius nemo modi, adipisci unde incidunt! Repellendus ad nihil fuga tempora nobis? Magni omnis, ea alias pariatur eligendi doloribus, adipisci laborum possimus maxime provident esse! Ullam similique ducimus quod unde culpa ipsa illum nisi aut aspernatur consequuntur assumenda neque nihil quam ipsum, eius suscipit eligendi. Optio est, illo aut reiciendis alias corporis! Dolorum omnis facilis similique labore ab laboriosam repudiandae magnam voluptatibus, iusto praesentium! Illum laudantium consectetur molestiae nulla voluptatibus consequuntur? Quas natus iure harum praesentium deleniti rem fuga quidem, sit sequi. Quod consequatur voluptatibus quas unde officia laborum expedita quaerat vero, facilis, nemo excepturi nobis iure repellat explicabo eius atque accusamus ex tempore. Cumque aliquam mollitia, provident iste quasi maxime, quod voluptatum fugit at accusantium vitae. Aperiam soluta nobis iusto incidunt non aspernatur nihil cumque eum vero commodi animi in, quasi deleniti doloremque earum reprehenderit officiis praesentium. Totam illum quod dolorum sequi placeat temporibus odit quis, doloribus ratione repellendus? Itaque et fuga illo cumque aliquam voluptatem magni laudantium fugiat nemo obcaecati.</p>
<p>Est iure, laboriosam sint quibusdam corrupti magni a minus repudiandae, incidunt autem consequuntur dolorem cumque eaque, nulla facere illum veritatis. Voluptatibus rerum fugiat iusto hic animi distinctio. Officiis, atque. Laboriosam excepturi iure quaerat exercitationem architecto optio laudantium, id amet dolores fugit ullam harum itaque nesciunt, at enim neque quam consectetur eveniet! Libero ex quos pariatur quaerat esse quas dolore praesentium in ipsam ab aut at expedita nam a soluta consequatur ducimus iusto rem voluptate laborum, dolorum quod veniam? Nihil accusamus quis ratione nemo beatae provident sequi ea ipsam quia explicabo quasi molestias voluptatum eius nostrum, modi sunt voluptate! Perspiciatis vitae voluptatibus quos ea optio perferendis minus repellendus a, ut tempora maiores beatae! Tempora impedit nesciunt ab dolore odit ipsa quia soluta illum! Explicabo dolorem molestiae fuga blanditiis, fugit commodi vitae ab non! Itaque veniam facere pariatur eius saepe ipsam incidunt numquam deleniti similique tempora? Doloribus natus architecto nulla vitae ullam ipsam fugiat maiores officia deleniti a, iure asperiores esse velit alias culpa? Nisi obcaecati, iste sequi officiis aliquam aut commodi vitae consequatur ea molestias sint eligendi ut dolore eveniet consectetur laborum quos natus cum quia molestiae explicabo id. A excepturi cumque porro vero nulla voluptate harum atque animi deleniti voluptas?</p>
<p>Ipsa esse dolor, dicta quis quod hic fugit quaerat repudiandae nobis cum voluptatem expedita amet tempora sed atque repellendus, cumque consequuntur iste adipisci quae aliquam ex sapiente corrupti? Quia numquam obcaecati nesciunt. Nisi quis cupiditate obcaecati at, nesciunt quae ipsum repellendus distinctio facilis ut architecto repellat explicabo impedit hic ex recusandae cum excepturi quisquam beatae sint fugiat, laboriosam blanditiis ratione. Veritatis accusamus quis totam et dignissimos, deserunt cumque quisquam amet eveniet ratione error autem ipsa maxime ducimus, voluptate, architecto nemo incidunt molestiae id. Saepe necessitatibus ipsam ad atque ullam quisquam maxime, soluta nemo voluptates corrupti mollitia praesentium, aliquam rem facilis ipsum deserunt perspiciatis autem animi quia commodi possimus! Consequuntur in nam sit hic temporibus aliquam. Amet alias, nobis exercitationem, veritatis nesciunt sit necessitatibus doloremque fugiat ullam rerum quia libero. Iste quaerat, totam labore qui provident eum sunt dolorem fugit facere dolorum quasi rem! Iste velit obcaecati aliquam maxime totam animi, harum labore vitae quos voluptates culpa earum quo, quibusdam explicabo eius nesciunt assumenda nulla natus, quae non ut dolorum nemo hic! Neque blanditiis molestiae esse ad laudantium, cum nostrum non alias nihil! Neque nostrum quam iste commodi consequatur obcaecati quibusdam ipsa corporis ut exercitationem rerum minima, facere aspernatur praesentium vitae.</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Necessitatibus, deserunt vero aut reiciendis omnis adipisci in aspernatur officia exercitationem, fuga perferendis alias maxime eum odio! Officia, exercitationem? Magnam cum sequi at totam distinctio libero animi non doloribus odio quisquam commodi quaerat, culpa cupiditate voluptatum impedit sapiente reprehenderit odit aspernatur. Quasi mollitia saepe commodi tempora inventore adipisci voluptatem eius et aperiam nemo maiores ipsam corrupti, impedit numquam repudiandae illo voluptate! Error nihil repellendus numquam similique cum in assumenda eligendi accusantium, saepe, consequuntur repudiandae neque fugiat aperiam delectus vero eum atque! Hic nostrum deleniti quos rem velit ad pariatur sit recusandae distinctio corrupti, et fugiat. Beatae nobis obcaecati esse fugit at culpa consectetur, accusamus suscipit necessitatibus, maxime pariatur ipsa? Suscipit quaerat pariatur accusamus debitis vitae neque eos odio, quod qui ad, explicabo quae rem necessitatibus sunt corrupti deserunt minima voluptatem laudantium obcaecati illum aliquid velit doloremque molestias? Hic fuga debitis explicabo neque quaerat ratione est totam cumque eius tempore necessitatibus at eos, sequi veritatis perferendis numquam ducimus sit nisi iusto doloribus. Dolor a doloremque maiores ipsum expedita? Deleniti deserunt delectus iste iusto aspernatur quo, dolorem ipsum, modi nulla, accusamus quam a eius natus nisi id in neque explicabo nesciunt at harum labore eaque ratione molestias! Officiis delectus facere error tenetur?</p>
<p>Magni possimus necessitatibus voluptate nobis voluptatibus minima odio atque at neque similique natus, totam obcaecati harum qui? Vero molestiae laborum accusantium reprehenderit consectetur, nobis veniam ea praesentium vel soluta hic, dolore assumenda, accusamus fugit voluptatum totam delectus ut minima at autem nam dignissimos illum veritatis explicabo? Explicabo harum animi commodi adipisci ab totam expedita. Cum atque maiores perspiciatis. Similique eos commodi, rem, tenetur placeat reprehenderit unde fugit, qui at sed corrupti! Sapiente, minus sint possimus itaque facere, voluptate illo officiis nesciunt accusantium recusandae maxime blanditiis doloribus. Odit asperiores quis illo quasi obcaecati ipsa, commodi beatae labore voluptates, vel quo neque, enim reprehenderit iste rerum debitis quisquam! Esse, maiores atque! Maxime eligendi eaque delectus eum, aut necessitatibus ad? A, accusamus! Quos, harum pariatur nostrum delectus dolores corrupti, repellendus vel blanditiis rem laboriosam laudantium quam perspiciatis incidunt dignissimos voluptatibus, minus voluptas ducimus fugit veritatis similique. Repudiandae possimus autem quod! Repudiandae eos perferendis libero nihil, dolores harum. Dolorum eos eligendi sequi odit at molestias mollitia libero nemo illum, excepturi, in temporibus, necessitatibus velit officia nam quidem laudantium dolore delectus non aliquam. Hic libero earum consequatur maiores nesciunt sequi, atque reprehenderit ipsa quos odit unde aperiam omnis, vitae quod, laborum accusantium perspiciatis dolorum ratione?</p>
<p>Sunt dolore ratione excepturi tempore voluptatum voluptas consequatur reiciendis, harum eaque mollitia beatae natus dolorem dolorum atque at consequuntur quaerat. Mollitia, iusto dicta. Nulla ea dolores similique aliquid possimus, pariatur a saepe iusto aut veritatis voluptatibus assumenda animi nam nobis esse tempore, asperiores numquam maiores. Consequuntur saepe fugiat ipsum excepturi, non corporis eum aut dignissimos. Consequatur nesciunt laborum earum consectetur reprehenderit voluptate molestias quidem, deleniti quae tempore sequi. Tempora architecto a accusantium odio voluptates aliquam autem suscipit provident sit asperiores incidunt illum ducimus facilis, molestias, inventore mollitia! Atque provident odio soluta deserunt quisquam tenetur quae molestias magnam ex, sed culpa nulla fuga corporis vero maxime quidem mollitia facere. Illo et non perspiciatis consequatur nobis temporibus eveniet nulla aut quae animi facilis veritatis minus, recusandae fugiat odit atque! Natus beatae velit possimus repellendus, perspiciatis vero culpa voluptatem quia atque quos doloribus nostrum fuga cum ea. Accusamus officia numquam praesentium sapiente! Tenetur sed harum itaque maxime ea velit, dolor doloremque soluta natus libero tempore similique adipisci optio dolorem aut accusamus in ut vel quaerat, inventore veniam quis. Explicabo, ipsum temporibus saepe ad, libero consectetur adipisci amet quaerat placeat rem sit dolore fugiat cupiditate porro quod commodi expedita totam veniam. Reiciendis, consequuntur nostrum!</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Voluptas odit dicta laudantium temporibus unde nesciunt repellendus asperiores incidunt consectetur! Accusantium quis dolorum eveniet quos atque voluptas amet! Iure quo nam alias, veniam hic totam quia voluptates dolorem quibusdam eum fuga enim sunt laudantium velit, ducimus doloremque omnis quae delectus explicabo quis sed. Voluptate, eius fugiat odio minima sapiente ut illo error molestiae, repellat exercitationem nesciunt sit iste earum provident reprehenderit? A, distinctio. Cupiditate magni eius eligendi atque et rerum dicta illo sequi voluptates esse dolores, ducimus corporis laudantium in eos accusantium temporibus delectus vel quidem dolor repudiandae numquam libero officiis non? Commodi nostrum doloribus officiis hic doloremque, corporis rerum harum dolore eum quia voluptatibus inventore at sapiente consequatur laudantium quos quaerat vero? Voluptates modi ut totam aliquid laudantium consequuntur beatae odio tempore iusto officiis exercitationem, animi quos, dignissimos voluptatibus quas ad eaque. Nam, repellendus numquam veniam excepturi inventore iusto non accusantium eaque corporis laboriosam ipsa at modi recusandae atque perspiciatis. Ab doloribus animi unde eaque cumque esse, sint qui suscipit earum magni provident labore, velit, ipsam inventore veniam reiciendis officia voluptas sequi quisquam impedit? Ut laborum magnam a iusto? Assumenda quidem expedita laudantium vero! Quos soluta, magni nemo ipsa ratione incidunt eius nihil facilis? Rerum corporis iure eligendi.</p>
<p>Inventore obcaecati reprehenderit, corporis repellendus, possimus velit vel alias, id voluptate eaque voluptatem numquam eveniet nostrum? Ab vel, illo consectetur quas beatae repudiandae error vero quam dolorum quasi velit aut iure! Totam nemo perferendis velit quidem adipisci reprehenderit molestias optio pariatur doloremque reiciendis repellat repellendus blanditiis error a ratione laudantium nobis aliquam, dolorem numquam porro sapiente. Amet inventore corporis suscipit natus est sunt, laborum excepturi rerum, quasi sequi commodi placeat officiis nobis. Voluptate, error odit! Blanditiis laborum, nihil quo quas reprehenderit aspernatur cupiditate explicabo! Sint magnam nesciunt eligendi nostrum cumque, dolor saepe est quidem nihil consectetur, laborum soluta, accusamus doloremque. Rerum modi sapiente aliquam dolore itaque, voluptatibus tempore atque consequuntur maxime omnis recusandae quo quaerat laborum aspernatur possimus dolorem earum adipisci, non, excepturi quia! Iusto et repellendus inventore eligendi magnam, quae beatae numquam aliquam animi incidunt officia similique qui cumque. Fugit est deserunt rerum, assumenda eligendi, voluptatibus corporis sed qui minus doloribus officia esse sit sint earum veniam. Magnam ipsum ipsam aliquam doloribus magni a perspiciatis qui beatae blanditiis dolorum, aliquid nemo impedit omnis numquam expedita mollitia, quos assumenda necessitatibus quas. Ipsam rem voluptas delectus ipsa ratione! Optio, distinctio dicta. Unde id harum dolorem sed velit, impedit distinctio dignissimos error.</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Laborum exercitationem quas ex! Nostrum quaerat eaque itaque repudiandae expedita dolores sapiente quia non hic obcaecati, tempora error quo facilis ut quas adipisci voluptatum voluptate, qui temporibus! Eveniet corporis molestiae sapiente, omnis nostrum quod consectetur at error velit aspernatur vero non illum quidem voluptates laboriosam molestias! Porro nobis, soluta cum laboriosam dolore delectus amet reprehenderit adipisci! Quis enim praesentium officiis voluptatum quasi, totam corporis vero sit, laboriosam beatae, nam ab! Molestias id amet impedit maxime cupiditate iure officiis, ad ipsum ipsam excepturi corrupti praesentium velit repellendus quo facilis? Officia recusandae nobis nemo fugiat iste id explicabo asperiores non quis rerum tempora repellendus necessitatibus error unde quam ea ratione autem quaerat est hic quia deserunt, doloremque aspernatur. Quos inventore enim perspiciatis illum voluptatibus officia voluptas molestiae eveniet consectetur eos voluptatem, tempore necessitatibus eius mollitia reiciendis aut ullam aspernatur aliquid nihil expedita nisi accusantium sunt quam dolorum. Natus sit sequi itaque ut, ex, maiores aspernatur magni nostrum ad ratione assumenda qui hic? Similique molestiae aperiam quae laudantium pariatur quibusdam, quidem provident ducimus, modi blanditiis sed? Recusandae, iure? Nihil laborum rerum adipisci tenetur aspernatur quas asperiores. Deserunt amet, veniam doloremque pariatur nisi et quis commodi voluptates error cumque modi inventore optio, tempore fugiat.</p>
<p>Totam, quod et tenetur officiis consequuntur laboriosam provident dicta unde placeat, expedita ad sit voluptas molestiae ipsam voluptatibus omnis, magni id sunt esse modi distinctio exercitationem? Saepe unde repudiandae enim dolor explicabo possimus vel quisquam cumque. Minus dolorem vitae, qui at facilis dicta tenetur quos aut corrupti nisi doloremque asperiores ab sint hic, laudantium eveniet. Alias iste tempora obcaecati dignissimos delectus nesciunt tenetur mollitia eum architecto officiis quas odit, quo magni, beatae accusamus asperiores eius facere, corrupti provident earum dicta laboriosam blanditiis esse libero! Aspernatur omnis iste sit, magni facere possimus ea provident officiis rerum ducimus similique natus neque suscipit incidunt repellat perspiciatis, itaque iure. Pariatur nesciunt libero rerum inventore? Nobis aperiam, nostrum odio facilis id animi atque provident hic dolorem quas fugit earum velit ratione qui ipsam repellendus ut sit omnis facere libero ex neque? Provident error ducimus modi magnam fuga, ex eveniet omnis earum sed magni at asperiores harum, veniam quidem perferendis. Dicta ab voluptates ipsum quas expedita eligendi voluptate praesentium, consequuntur harum qui eum veniam maiores in molestiae aliquid, totam quod officiis asperiores ex necessitatibus. Saepe porro unde dicta beatae consectetur provident quidem suscipit, sed laborum sit, doloribus expedita mollitia aliquam adipisci necessitatibus pariatur veniam laudantium sequi?</p><button data-modal-trigger="#my-modal">Click for modal</button>
<p>Aperiam, fugit ipsam. Minus quaerat nesciunt eum iure architecto, exercitationem laudantium corporis quos quam odio repellendus, accusamus qui dolor vitae numquam suscipit debitis, amet eaque perferendis quasi doloremque. Sit sapiente nihil corporis mollitia placeat tenetur eius fuga quisquam quam, dignissimos, possimus aspernatur. Praesentium magnam obcaecati, vitae deserunt inventore dolorem aspernatur impedit laboriosam quae deleniti nesciunt, animi amet totam est eum delectus incidunt id quisquam sapiente labore sint ad ipsa dignissimos. Officia ipsum quis minus sapiente corrupti quasi eius iste unde distinctio ducimus voluptatum vitae perferendis, iusto cupiditate optio laborum veniam ex dolorum, dolores omnis! Repellat perspiciatis quidem, molestiae reprehenderit a aliquam, modi obcaecati voluptatum, iste expedita itaque non. Error atque fugiat sunt ab. Ullam, ipsam id! Sunt fugit maxime incidunt illum reprehenderit deserunt qui iste quisquam natus labore eveniet ut porro ab eos commodi consequuntur eum delectus quaerat, molestias, architecto obcaecati. Unde aliquam exercitationem numquam corrupti recusandae autem ratione animi voluptas. Laborum adipisci aperiam consequuntur dolorum dolor aspernatur rerum cum impedit harum vel, animi quaerat, magnam consectetur optio sunt assumenda! Eius tenetur nam fugiat voluptatibus dignissimos ipsum, aperiam sint delectus ab, reiciendis in voluptatem tempore optio. Numquam mollitia quis vero sequi, nisi tempore fuga ducimus doloremque a nostrum, praesentium id.</p>
<p>Consequatur, velit, fuga harum nam quod commodi esse tempora laboriosam exercitationem reiciendis veniam, fugit expedita. Vitae, doloremque? Ex similique saepe perferendis iste autem veniam aliquid, harum minus? Molestias nobis eaque inventore saepe similique et vero autem eveniet repellendus. Excepturi magnam dignissimos, consectetur unde in expedita praesentium possimus consequuntur quaerat corporis beatae nobis minus. Molestias, harum ut! Dolores distinctio, quo placeat nam obcaecati cupiditate voluptatem nemo? A suscipit placeat quas iusto impedit. Libero ipsam excepturi ipsum quam, animi laboriosam sapiente nostrum necessitatibus quas ea pariatur error explicabo quos consectetur ullam nihil odit? Voluptatem animi repellat rem inventore, repudiandae saepe laborum culpa nihil deleniti corporis. Nostrum reprehenderit recusandae consectetur, quaerat autem natus vitae. Soluta nemo quisquam adipisci cupiditate similique architecto, quam ab corporis harum suscipit quo est, iusto quod earum modi necessitatibus, asperiores ratione sunt animi voluptatum? Eveniet, adipisci illo nemo pariatur ut nisi impedit sint debitis reiciendis nihil, illum dicta cupiditate quo quidem, est laborum minima fugit. Autem fuga eligendi necessitatibus obcaecati temporibus aspernatur, ullam deserunt illum nulla voluptatum mollitia, suscipit odio, placeat molestias. Ullam harum aliquid, voluptate est nam commodi tenetur ut repellat vel quaerat. Sed cupiditate voluptatibus eveniet non aspernatur consequuntur pariatur molestiae magnam, quis, dolorem nemo aperiam impedit.</p><button data-modal-trigger="#my-modal">Click for modal</button>
I have 2 blocks: A and B.
B is scrollable, but A is positioned absolutely above B.
When I scroll with mouse cursor in the B area it works well, but if it placed in the area of A, the B block isn't scrolling(obviously).
I tried to apply pointer-events to none for A, it works as needed, but it contains some buttons, which should be clickable.
Is there a way to ignore scrolling event but don't ignore click events for block A?
.block-a {
width: 500px;
height: 200px;
position: absolute;
background: rgba(0,0,0,0.3);
}
.block-a button {
margin: 50px;
}
.block-b {
width: 500px;
height: 500px;
background: #ffd700;
overflow-y: scroll;
}
<div class="block-a">
<button>Should be clickable</button>
</div>
<div class="block-b">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem placeat sapiente, voluptatibus iure earum, rerum cupiditate quo architecto officia nulla dignissimos deleniti aspernatur. Voluptatem hic nulla iure aut asperiores corrupti quia placeat culpa facilis. Distinctio tempora soluta assumenda, eaque asperiores maiores iusto explicabo accusamus veniam aperiam temporibus repellendus sint, consectetur beatae sapiente, dolorum sunt reiciendis. Odit, ad, omnis. Nobis sit dolorum est quaerat vel labore adipisci ab, incidunt ex quidem sint illum at dicta aut dolorem ipsam pariatur facere blanditiis vitae cum quasi molestias placeat impedit. Voluptate veniam sapiente a praesentium, doloribus cumque voluptas tenetur. Aliquam, voluptatibus officia aut. Beatae amet ut ipsum, fugit facilis debitis nihil temporibus consequatur possimus et explicabo tempora natus enim odit consectetur nemo cupiditate odio, dolorum autem eveniet repellendus optio unde, sint qui. Debitis doloremque nemo natus totam officia eaque, sed dicta officiis modi ab tempore id eius sit repudiandae fugiat? Molestiae eos, vel, fugit veritatis iusto cum excepturi reprehenderit alias repellendus aperiam, corporis magni assumenda totam eligendi recusandae necessitatibus? Impedit doloribus veniam sed animi fugit fuga, dolore neque nesciunt optio assumenda minima saepe quibusdam commodi reprehenderit quidem ipsum quis dolores, ducimus eaque nostrum rerum et. Inventore repellat, beatae error delectus placeat ea officia, fuga harum odit ullam ad eveniet fugit? Facilis tempore ea adipisci ipsam excepturi obcaecati ratione, at voluptate, eos nulla non velit nostrum quasi placeat ex ipsum! Corporis totam sed quaerat sequi ratione consequatur debitis dolorum saepe. Amet officiis commodi est sunt! Minima molestias ab cupiditate fugiat pariatur quia voluptatibus, nemo, aperiam, assumenda voluptates labore eum harum molestiae, optio mollitia accusantium. Quidem magnam veritatis provident, eligendi ipsam sint ducimus sed, excepturi molestias nemo vitae a officiis magni aliquam est facilis autem voluptatem repudiandae et neque nihil ab. Laborum voluptas ea totam vel minima quasi soluta odit maxime dicta, numquam obcaecati, doloremque fugit sapiente. Odio, cumque illum quos ut atque. Incidunt, non, dolores. Illo vero eos, dignissimos delectus voluptas iusto libero, perspiciatis tempore sed aspernatur laudantium quisquam error reiciendis officiis consequatur perferendis veniam repellendus qui tenetur numquam deserunt odio debitis! Quae at recusandae placeat doloribus corporis iure iusto unde voluptate quis laboriosam! Odio quasi ipsam quisquam soluta iusto quis nisi illo, at sequi eaque provident consequuntur! Nam labore, molestiae aperiam quas repellendus consectetur, soluta id doloremque esse vero? Placeat optio qui at non iste dolore, temporibus iusto repudiandae nihil commodi velit explicabo minima, libero dolores exercitationem vero, neque? Accusamus nobis harum magnam ratione eveniet delectus nam ea numquam, iste. Ipsa velit dolorum ex rem ipsum culpa possimus cupiditate, mollitia iure, quo molestias laudantium quos, hic saepe tempora minus magni perferendis. Placeat quos eveniet sint ut, modi quae recusandae nostrum vitae soluta itaque architecto tenetur vel doloribus ullam a, adipisci quasi aperiam dignissimos distinctio? Eveniet recusandae minus, repellat explicabo, harum rerum ab obcaecati omnis adipisci accusantium nulla rem, quia veniam quaerat placeat non quibusdam est, tempora quos! Debitis exercitationem similique veritatis ratione sit nobis excepturi iusto aut, maxime, quam nemo doloribus quidem ipsa libero velit ducimus praesentium omnis aspernatur molestiae sint voluptates fugiat tempora ab sunt. Pariatur odio, quod doloribus quos similique iste recusandae optio modi architecto quo non sapiente autem tempore beatae nihil repudiandae numquam tempora quibusdam voluptates ea incidunt. Distinctio cupiditate quasi error, quae adipisci dolor ipsam itaque debitis saepe vel accusantium, beatae enim esse a mollitia, illum eos? Qui ipsa incidunt commodi dolorem, quibusdam magnam tempore iste obcaecati iure a modi perspiciatis blanditiis quam ex aut distinctio assumenda, officiis, voluptate, repellendus ad. Consequatur odio eveniet laudantium porro inventore odit, quam ut provident quos, atque reprehenderit rem officiis ipsa debitis doloribus laboriosam voluptas animi a. Iure, soluta omnis necessitatibus consequuntur. Recusandae accusantium porro, maiores voluptatum, voluptatibus minima fugit ad iure quod, facere vel vitae, ducimus sed aperiam ut? Quasi possimus amet obcaecati aperiam fugit necessitatibus eius fugiat rem ducimus aut, error, nesciunt labore optio harum repellendus placeat odio tempore veritatis velit debitis ipsa modi cupiditate. Provident sit nihil facilis consequuntur suscipit ipsum molestias tempora quo assumenda quibusdam, nostrum rerum dignissimos aliquam nobis, modi placeat? Harum sint commodi blanditiis nobis eaque pariatur doloribus laborum excepturi dicta temporibus praesentium asperiores voluptates, iusto deleniti, unde consequatur corporis officiis magnam natus labore veniam amet velit fugit. Quos quia facere hic in labore voluptatem consequatur adipisci, voluptate aspernatur doloremque iure inventore veritatis voluptatibus, quaerat recusandae nihil totam voluptates suscipit. Qui, consequuntur, pariatur. Molestias commodi voluptatibus necessitatibus, perspiciatis officia architecto consequatur nostrum maxime dolorum adipisci numquam eveniet incidunt tempore dolores provident nulla saepe temporibus tempora. Debitis necessitatibus aut, alias mollitia consequatur sapiente error quaerat quasi quia, voluptas minus eveniet at et corrupti asperiores unde ducimus dolorum, quas autem natus, dolorem totam esse libero! Ex fugit dignissimos reprehenderit ducimus, libero velit placeat dicta architecto veritatis adipisci enim, possimus magnam. Quam fugit aperiam sunt asperiores excepturi nesciunt minus, quidem aspernatur sequi temporibus beatae cum culpa placeat. Hic tempore, iure ad asperiores culpa possimus fugiat quasi consequuntur. Cumque vero autem quidem qui fuga optio ipsam repudiandae est, ex aperiam deleniti quaerat facilis praesentium, quo! Enim eveniet reiciendis dolor sunt, ullam perferendis. Consectetur asperiores inventore soluta in obcaecati, porro sint! Deleniti ea hic accusantium debitis similique veritatis ab blanditiis fugiat atque repudiandae quasi iusto facilis, dolor necessitatibus laborum, nisi eaque aliquam nihil cupiditate ullam, molestiae delectus ad, eligendi aperiam. Corrupti quis esse, deleniti necessitatibus eveniet illum, temporibus hic, harum debitis natus iusto consequuntur culpa repudiandae unde consequatur velit vero. Aspernatur odio rem tempore quasi assumenda doloremque nisi sunt deleniti saepe, numquam accusantium accusamus cupiditate consectetur fugit pariatur ipsam esse quo possimus impedit. Dolore animi harum rem aperiam porro voluptatibus, obcaecati, nesciunt, totam voluptate corrupti error facilis non laborum impedit sapiente fuga iure doloremque laboriosam asperiores tempora accusamus earum! Ad maiores natus iusto necessitatibus, quod alias quasi culpa. Labore quo, quae, molestiae laboriosam dolorem sunt! Dolore consequatur eligendi enim inventore ab cum quam impedit vitae beatae error ipsum iure optio quis voluptates, delectus nobis accusantium magni! Vero iste aliquid, repellat corporis cumque neque dignissimos maxime aut recusandae. Ex a harum, at temporibus! Adipisci suscipit quo quod, voluptatum consectetur quaerat nesciunt! Architecto, id nihil!</p>
</div>
I guess there is no pure CSS way to achieve this. You may try some JS stuff. There is 2 obvious ways:
Set pointer-events: none for whole A block and trigger click event on A manually when it's clicked on B. document.elementFromPoint(x,y) and disabling/enabling pointer-events should do the trick.
Set pointer-events: none for all except buttons and catch mousewheel event on buttons. Mousewheel event is pretty tricky, so you may look at jquery.mousewheel library.
What you could do instead of setting pointer-event:none on the a tag, make a class called .{name} and use the pointer-event:none only on that class. That way your other buttons are not affected.
.block-a {
width: 500px;
height: 200px;
position: absolute;
background: rgba(0,0,0,0.3);
}
.block-a button {
margin: 50px;
pointer-events: all;
}
.scroll {
pointer-events: none;
}
.block-b {
width: 500px;
height: 500px;
background: #ffd700;
overflow-y: scroll;
}
<div class="block-a scroll">
<button>Should be clickable</button>
</div>
<div class="block-b">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem placeat sapiente, voluptatibus iure earum, rerum cupiditate quo architecto officia nulla dignissimos deleniti aspernatur. Voluptatem hic nulla iure aut asperiores corrupti quia placeat culpa facilis. Distinctio tempora soluta assumenda, eaque asperiores maiores iusto explicabo accusamus veniam aperiam temporibus repellendus sint, consectetur beatae sapiente, dolorum sunt reiciendis. Odit, ad, omnis. Nobis sit dolorum est quaerat vel labore adipisci ab, incidunt ex quidem sint illum at dicta aut dolorem ipsam pariatur facere blanditiis vitae cum quasi molestias placeat impedit. Voluptate veniam sapiente a praesentium, doloribus cumque voluptas tenetur. Aliquam, voluptatibus officia aut. Beatae amet ut ipsum, fugit facilis debitis nihil temporibus consequatur possimus et explicabo tempora natus enim odit consectetur nemo cupiditate odio, dolorum autem eveniet repellendus optio unde, sint qui. Debitis doloremque nemo natus totam officia eaque, sed dicta officiis modi ab tempore id eius sit repudiandae fugiat? Molestiae eos, vel, fugit veritatis iusto cum excepturi reprehenderit alias repellendus aperiam, corporis magni assumenda totam eligendi recusandae necessitatibus? Impedit doloribus veniam sed animi fugit fuga, dolore neque nesciunt optio assumenda minima saepe quibusdam commodi reprehenderit quidem ipsum quis dolores, ducimus eaque nostrum rerum et. Inventore repellat, beatae error delectus placeat ea officia, fuga harum odit ullam ad eveniet fugit? Facilis tempore ea adipisci ipsam excepturi obcaecati ratione, at voluptate, eos nulla non velit nostrum quasi placeat ex ipsum! Corporis totam sed quaerat sequi ratione consequatur debitis dolorum saepe. Amet officiis commodi est sunt! Minima molestias ab cupiditate fugiat pariatur quia voluptatibus, nemo, aperiam, assumenda voluptates labore eum harum molestiae, optio mollitia accusantium. Quidem magnam veritatis provident, eligendi ipsam sint ducimus sed, excepturi molestias nemo vitae a officiis magni aliquam est facilis autem voluptatem repudiandae et neque nihil ab. Laborum voluptas ea totam vel minima quasi soluta odit maxime dicta, numquam obcaecati, doloremque fugit sapiente. Odio, cumque illum quos ut atque. Incidunt, non, dolores. Illo vero eos, dignissimos delectus voluptas iusto libero, perspiciatis tempore sed aspernatur laudantium quisquam error reiciendis officiis consequatur perferendis veniam repellendus qui tenetur numquam deserunt odio debitis! Quae at recusandae placeat doloribus corporis iure iusto unde voluptate quis laboriosam! Odio quasi ipsam quisquam soluta iusto quis nisi illo, at sequi eaque provident consequuntur! Nam labore, molestiae aperiam quas repellendus consectetur, soluta id doloremque esse vero? Placeat optio qui at non iste dolore, temporibus iusto repudiandae nihil commodi velit explicabo minima, libero dolores exercitationem vero, neque? Accusamus nobis harum magnam ratione eveniet delectus nam ea numquam, iste. Ipsa velit dolorum ex rem ipsum culpa possimus cupiditate, mollitia iure, quo molestias laudantium quos, hic saepe tempora minus magni perferendis. Placeat quos eveniet sint ut, modi quae recusandae nostrum vitae soluta itaque architecto tenetur vel doloribus ullam a, adipisci quasi aperiam dignissimos distinctio? Eveniet recusandae minus, repellat explicabo, harum rerum ab obcaecati omnis adipisci accusantium nulla rem, quia veniam quaerat placeat non quibusdam est, tempora quos! Debitis exercitationem similique veritatis ratione sit nobis excepturi iusto aut, maxime, quam nemo doloribus quidem ipsa libero velit ducimus praesentium omnis aspernatur molestiae sint voluptates fugiat tempora ab sunt. Pariatur odio, quod doloribus quos similique iste recusandae optio modi architecto quo non sapiente autem tempore beatae nihil repudiandae numquam tempora quibusdam voluptates ea incidunt. Distinctio cupiditate quasi error, quae adipisci dolor ipsam itaque debitis saepe vel accusantium, beatae enim esse a mollitia, illum eos? Qui ipsa incidunt commodi dolorem, quibusdam magnam tempore iste obcaecati iure a modi perspiciatis blanditiis quam ex aut distinctio assumenda, officiis, voluptate, repellendus ad. Consequatur odio eveniet laudantium porro inventore odit, quam ut provident quos, atque reprehenderit rem officiis ipsa debitis doloribus laboriosam voluptas animi a. Iure, soluta omnis necessitatibus consequuntur. Recusandae accusantium porro, maiores voluptatum, voluptatibus minima fugit ad iure quod, facere vel vitae, ducimus sed aperiam ut? Quasi possimus amet obcaecati aperiam fugit necessitatibus eius fugiat rem ducimus aut, error, nesciunt labore optio harum repellendus placeat odio tempore veritatis velit debitis ipsa modi cupiditate. Provident sit nihil facilis consequuntur suscipit ipsum molestias tempora quo assumenda quibusdam, nostrum rerum dignissimos aliquam nobis, modi placeat? Harum sint commodi blanditiis nobis eaque pariatur doloribus laborum excepturi dicta temporibus praesentium asperiores voluptates, iusto deleniti, unde consequatur corporis officiis magnam natus labore veniam amet velit fugit. Quos quia facere hic in labore voluptatem consequatur adipisci, voluptate aspernatur doloremque iure inventore veritatis voluptatibus, quaerat recusandae nihil totam voluptates suscipit. Qui, consequuntur, pariatur. Molestias commodi voluptatibus necessitatibus, perspiciatis officia architecto consequatur nostrum maxime dolorum adipisci numquam eveniet incidunt tempore dolores provident nulla saepe temporibus tempora. Debitis necessitatibus aut, alias mollitia consequatur sapiente error quaerat quasi quia, voluptas minus eveniet at et corrupti asperiores unde ducimus dolorum, quas autem natus, dolorem totam esse libero! Ex fugit dignissimos reprehenderit ducimus, libero velit placeat dicta architecto veritatis adipisci enim, possimus magnam. Quam fugit aperiam sunt asperiores excepturi nesciunt minus, quidem aspernatur sequi temporibus beatae cum culpa placeat. Hic tempore, iure ad asperiores culpa possimus fugiat quasi consequuntur. Cumque vero autem quidem qui fuga optio ipsam repudiandae est, ex aperiam deleniti quaerat facilis praesentium, quo! Enim eveniet reiciendis dolor sunt, ullam perferendis. Consectetur asperiores inventore soluta in obcaecati, porro sint! Deleniti ea hic accusantium debitis similique veritatis ab blanditiis fugiat atque repudiandae quasi iusto facilis, dolor necessitatibus laborum, nisi eaque aliquam nihil cupiditate ullam, molestiae delectus ad, eligendi aperiam. Corrupti quis esse, deleniti necessitatibus eveniet illum, temporibus hic, harum debitis natus iusto consequuntur culpa repudiandae unde consequatur velit vero. Aspernatur odio rem tempore quasi assumenda doloremque nisi sunt deleniti saepe, numquam accusantium accusamus cupiditate consectetur fugit pariatur ipsam esse quo possimus impedit. Dolore animi harum rem aperiam porro voluptatibus, obcaecati, nesciunt, totam voluptate corrupti error facilis non laborum impedit sapiente fuga iure doloremque laboriosam asperiores tempora accusamus earum! Ad maiores natus iusto necessitatibus, quod alias quasi culpa. Labore quo, quae, molestiae laboriosam dolorem sunt! Dolore consequatur eligendi enim inventore ab cum quam impedit vitae beatae error ipsum iure optio quis voluptates, delectus nobis accusantium magni! Vero iste aliquid, repellat corporis cumque neque dignissimos maxime aut recusandae. Ex a harum, at temporibus! Adipisci suscipit quo quod, voluptatum consectetur quaerat nesciunt! Architecto, id nihil!</p>
</div>
It works fine like his for me. it's compiled in here because I can't to make it understand jade in this previewer