Related
❌ this isn't what I want, since it didn't stick to the end, and didn't stay fixed.
(the pseudoelement is a gradient of white and transparent)
✅ this is what I want, and is correct only at the start when I never scrolled :(
(the pseudoelement is a gradient of white and transparent)
I tried absolute, fixed, and also sticky... nothing helps but absolute is correct only at the start when we didn't scroll, but when scrolling the ::before will start to follow the scrollbar which isn't what I want... I want that the ::before staying at the bottom every time (fixed doesn't help because it will go outside the <div> and follow maybe the <body>)
I can't change the structure, since I need to use ::before or ::after, but not create a new div, but I can use whatever CSS you suggest to me
I thought is a simple problem since fixed can solve it, but turn out is very hard, and fixed never work :( (I tried also to see on StackOverflow like 10 questions, and nothing helps)
The purpose is to show a little gradient at the end of the div...
Demo:
just try the demo below to see the bug:
div {
position: relative;
width: 300px;
height: 70vh;
padding: 1rem;
border: 2px solid red;
overflow: auto;
border-radius: 1rem;
}
div::before {
content: "";
position: absolute;
/* I tried also with fixed, but it goes outside the div :( */
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background-image: linear-gradient(to top, white, transparent);
/*outline: 5px solid blue;*/ /* if you can't see the gradient, uncommnet this line */
}
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur
magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia,
soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis
architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti
animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni
officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe
ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et
inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure
dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni
sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta
sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto
ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi
repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro!
</div>
This snippet demonstrates a way of doing this using position sticky on the pseudo element.
However, it relies on knowing the height and padding of the element so works for your example code and may work in your particular use case, but isn't a totally general solution.
div {
position: relative;
width: 300px;
height: 70vh;
padding: 1rem;
border: 2px solid red;
overflow: auto;
border-radius: 1rem;
}
div::before {
content: "";
position: sticky;
display: block;
top: 0;
left: 0;
margin-left: -1rem;
width: 100%;
height: calc(100% + 1rem);
background-image: linear-gradient(to top, white, transparent);
background-size: 100% 40%;
background-repeat: no-repeat;
background-position: left bottom;
margin-top: calc(-70vh - 1rem);
}
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur
magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia,
soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis
architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti
animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni
officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe
ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et
inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure
dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni
sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta
sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto
ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi
repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro!
</div>
You can try out this approach to add a shadow for your paragraph.
You can make your wrapper container relative to your inner content to keep your shadow fixed at the bottom of the box.
Here is the sample code.
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur
magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia,
soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis
architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti
animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni
officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe
ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et
inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure
dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Non sint praesentium quod, perferendis nesciunt, cumque exercitationem magni officiis aliquid, a dolor omnis dolore placeat fugiat consequatur. Fugit repudiandae porro id! Error voluptas, aspernatur magni
sapiente ducimus illo maiores repellat voluptatibus consectetur aut atque unde eveniet excepturi nam, ipsum at. Labore saepe ab ex beatae libero autem. A expedita corporis placeat? Eos eum nobis excepturi delectus enim autem, vitae ea mollitia, soluta
sequi nihil, officiis iusto quos sunt omnis perspiciatis consequuntur aliquam impedit voluptates. Odit, aperiam facere et inventore dicta distinctio. Corrupti consectetur, tempore nihil voluptates minus odio, vitae facilis eveniet quos officiis architecto
ipsum libero cupiditate aut. Sapiente doloribus aperiam libero laborum, accusamus ipsum et est tenetur voluptate iure dolorum. Sit quae dolor maxime assumenda quam, fuga id soluta aliquam reprehenderit vitae. Consequuntur ducimus, deleniti animi excepturi
repudiandae pariatur assumenda neque? Impedit tempore neque odio a, excepturi maiores rerum porro!
<div class="fixed-wrapper">
<div class="fixed-shadow" />
</div>
</div>
.content {
position: relative;
width: 300px;
height: 70vh;
padding: 1rem;
border: 2px solid red;
overflow: auto;
border-radius: 1rem;
margin: 0 auto;
}
.fixed-wrapper {
position: absolute;
bottom: 0;
width: 300px;
height: 100px;
}
.fixed-shadow {
position: fixed;
width: 300px;
height: 100px;
background-image: linear-gradient(to top, white, transparent);
}
I'm creating the following layout with a sidebar and a flexbox container having 3 boxs with middle one having scrolling.
The problem I'm running into is, when i zoom in, the content goes past the viewable screen and when i zoom out it leaves a white blank screen on the right side.
I'm attaching a video link and the code to help you guys understand, and hopefully help me out here.
https://www.awesomescreenshot.com/video/7839859?key=b61f0db322aecd2c43d5f1749178dcf1
* {
margin: 0;
padding: 0;
}
html,
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
.sidebar {
width: 12%;
height: -webkit-fill-available;
position: fixed;
top: 0;
left: 0;
background-color: black;
overflow-y: scroll;
}
.container {
position: fixed;
left: 12%;
height: 100%;
width: 100%;
}
.navbar {
background-color: grey;
}
.navbar h2 {
text-align: center;
}
.fluid-container {
background-color: rgb(193, 224, 236);
height: 100%;
display: flex;
width: 100%;
}
.box {
width: 100%;
background-color: black;
border: 1px solid red;
}
.item {
width: 220px;
height: 100%;
border: 1px solid green;
margin: 15px;
background-color: sandybrown;
}
#item1 {
height: calc(100vh - 100px);
}
#item2 {
overflow-y: scroll;
height: calc(100vh - 100px);
}
#item3 {
height: calc(100vh - 100px);
}
.items-container {
display: flex;
}
<div class="sidebar">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, porro reprehenderit iure sed voluptates aperiam delectus excepturi inventore non, esse a repellat dolores obcaecati, libero dolor rerum aspernatur ullam? Nam?Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Error, molestias eveniet! Voluptate vel nam dolorem beatae explicabo neque reprehenderit delectus similique distinctio natus molestias, quae unde ducimus ea dolore illo quis aliquam hic consequatur incidunt quidem animi
fuga eum mollitia? Veritatis temporibus magnam placeat facere deleniti dolorem consequatur praesentium! Voluptatibus cum, ducimus repudiandae, neque distinctio ad laudantium, vitae minus odit repellat praesentium ipsum laborum atque iste quibusdam
perspiciatis assumenda corrupti.</p>
</div>
<div class="container">
<div class="navbar">
<h2>Header Section</h2>
</div>
<div class="fluid-container">
<div id="box1" class="box">
<h2 style="text-align: center; font-size: 2rem; margin-top: 5px;">Tri Column Title</h2>
<div class="items-container">
<div id="item1" class="item">
<h2>Title 1</h2>
</div>
<div id="item2" class="item">
<h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus
est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore
repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat
adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus
ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis
error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis
explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur
explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem
labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium
sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim
in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque
similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi
vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt
temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos,
ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione
ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate
sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium
corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" class="item">
<h2>Title 3</h2>
</div>
</div>
</div>
<div id="box2" class="box">
<div class="items-container">
<div id="item1" class="item">
<h2>Title 1</h2>
</div>
<div id="item2" class="item">
<h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus
est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore
repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat
adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus
ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis
error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis
explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur
explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem
labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium
sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim
in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque
similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi
vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt
temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos,
ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione
ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate
sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium
corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" class="item">
<h2>Title 3</h2>
</div>
</div>
</div>
</div>
</div>
So, I was able to achieve that, by using some relative values instead of fixed values. Here are the changes that I did:
Changed width of .container class from 88% to 100% to let it occupy space, as much as it wants.
Since, space taken by sidebar was 12% of total space, I divided remaining space by 2 so that both containers have equal share, i.e. changed the width of .box class from 100% to 44%((100%-12%)/2=44%).
Changed width of .item class to 32.3% since, 32.3+32.3+32.3 ≅ 97% and added the remaining 1% as margin instead of a fixed, 15px margin (Also added 1% padding to prevent collapse).
Note: Using relative values can easily solve any such problem. It's always better to use relative values while developing websites.
Here's final code:
* {
margin: 0;
padding: 0;
}
html,
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
width: 100%;
height: 100%;
}
.sidebar {
width: 12%;
height: -webkit-fill-available;
position: fixed;
top: 0;
left: 0;
background-color: black;
overflow-y: scroll;
}
.container {
position: fixed;
left: 12%;
height: 100%;
width: 100%;
}
.navbar {
background-color: grey;
}
.navbar h2 {
text-align: center;
}
.fluid-container {
background-color: rgb(193, 224, 236);
height: 100%;
display: flex;
width: 100%;
}
.box {
width:44%;
background-color: black;
border: 1px solid red;
}
.item {
width: 32.3%;
height: 100%;
padding:1%;
border: 1px solid green;
margin:1%;
background-color: sandybrown;
}
#item1 {
height: calc(100vh - 100px);
}
#item2 {
overflow-y: scroll;
height: calc(100vh - 100px);
}
#item3 {
height: calc(100vh - 100px);
}
.items-container {
display: flex;
}
<div class="sidebar">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, porro reprehenderit iure sed voluptates aperiam delectus excepturi inventore non, esse a repellat dolores obcaecati, libero dolor rerum aspernatur ullam? Nam?Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Error, molestias eveniet! Voluptate vel nam dolorem beatae explicabo neque reprehenderit delectus similique distinctio natus molestias, quae unde ducimus ea dolore illo quis aliquam hic consequatur incidunt quidem animi
fuga eum mollitia? Veritatis temporibus magnam placeat facere deleniti dolorem consequatur praesentium! Voluptatibus cum, ducimus repudiandae, neque distinctio ad laudantium, vitae minus odit repellat praesentium ipsum laborum atque iste quibusdam
perspiciatis assumenda corrupti.</p>
</div>
<div class="container">
<div class="navbar">
<h2>Header Section</h2>
</div>
<div class="fluid-container">
<div id="box1" class="box">
<h2 style="text-align: center; font-size: 2rem; margin-top: 5px;">Tri Column Title</h2>
<div class="items-container">
<div id="item1" class="item">
<h2>Title 1</h2>
</div>
<div id="item2" class="item">
<h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus
est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore
repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat
adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus
ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis
error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis
explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur
explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem
labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium
sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim
in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque
similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi
vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt
temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos,
ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione
ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate
sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium
corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" class="item">
<h2>Title 3</h2>
</div>
</div>
</div>
<div id="box2" class="box">
<div class="items-container">
<div id="item1" class="item">
<h2>Title 1</h2>
</div>
<div id="item2" class="item">
<h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus
est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore
repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat
adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus
ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis
error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis
explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur
explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem
labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium
sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim
in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque
similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi
vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt
temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos,
ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione
ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate
sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium
corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" class="item">
<h2>Title 3</h2>
</div>
</div>
</div>
</div>
</div>
Add height: 100%; and width: 100%; to your HTML and body. Then specify width: 88%; on your container, because your sidebar is taking up 12%. 88+12=100%.
Finally, and most importantly. You have a fixed width on each item of 220px. This means it will not dynamically grow or shrink when you zoom in or zoom out. Instead use width: 100%;.
* {
margin: 0;
padding: 0;
}
html,
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
width: 100%;
height: 100%;
}
.sidebar {
width: 12%;
height: -webkit-fill-available;
position: fixed;
top: 0;
left: 0;
background-color: black;
overflow-y: scroll;
}
.container {
position: fixed;
left: 12%;
height: 100%;
width: 88%;
}
.navbar {
background-color: grey;
}
.navbar h2 {
text-align: center;
}
.fluid-container {
background-color: rgb(193, 224, 236);
height: 100%;
display: flex;
width: 100%;
}
.box {
width: 100%;
background-color: black;
border: 1px solid red;
}
.item {
width: 100%;
height: 100%;
border: 1px solid green;
margin: 15px;
background-color: sandybrown;
}
#item1 {
height: calc(100vh - 100px);
}
#item2 {
overflow-y: scroll;
height: calc(100vh - 100px);
}
#item3 {
height: calc(100vh - 100px);
}
.items-container {
display: flex;
}
<div class="sidebar">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, porro reprehenderit iure sed voluptates aperiam delectus excepturi inventore non, esse a repellat dolores obcaecati, libero dolor rerum aspernatur ullam? Nam?Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Error, molestias eveniet! Voluptate vel nam dolorem beatae explicabo neque reprehenderit delectus similique distinctio natus molestias, quae unde ducimus ea dolore illo quis aliquam hic consequatur incidunt quidem animi
fuga eum mollitia? Veritatis temporibus magnam placeat facere deleniti dolorem consequatur praesentium! Voluptatibus cum, ducimus repudiandae, neque distinctio ad laudantium, vitae minus odit repellat praesentium ipsum laborum atque iste quibusdam
perspiciatis assumenda corrupti.</p>
</div>
<div class="container">
<div class="navbar">
<h2>Header Section</h2>
</div>
<div class="fluid-container">
<div id="box1" class="box">
<h2 style="text-align: center; font-size: 2rem; margin-top: 5px;">Tri Column Title</h2>
<div class="items-container">
<div id="item1" class="item">
<h2>Title 1</h2>
</div>
<div id="item2" class="item">
<h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus
est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore
repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat
adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus
ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis
error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis
explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur
explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem
labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium
sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim
in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque
similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi
vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt
temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos,
ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione
ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate
sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium
corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" class="item">
<h2>Title 3</h2>
</div>
</div>
</div>
<div id="box2" class="box">
<div class="items-container">
<div id="item1" class="item">
<h2>Title 1</h2>
</div>
<div id="item2" class="item">
<h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam
quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus
est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore
repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat
adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus
ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis
error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis
explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur
explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem
labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium
sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim
in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque
similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi
vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt
temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos,
ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione
ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate
sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium
corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" class="item">
<h2>Title 3</h2>
</div>
</div>
</div>
</div>
</div>
Add this to the top of your html code in the head section
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I'm have created a layout with sidebar and 2 flexboxs, in the second box containing 3 title boxs i want a horizontal scroll bar to scroll and show other titles but it wont work, also the end arrow of the scroll bar doesnot show. I'm attaching a image to help you understand look at the second box on the right hand bottom of the screen.
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
.sidebar {
width: 12%;
height: -webkit-fill-available;
position: fixed;
top: 0;
left: 0;
background-color: black;
overflow-y: scroll;
}
.container {
position: fixed;
left: 12%;
height: 100%;
width: 100%;
}
.navbar {
background-color: grey;
}
.navbar h2 {
text-align: center;
}
.fluid-container {
background-color: rgb(193, 224, 236);
height: 100%;
display: flex;
width: 100%;
}
.box {
width: 100%;
background-color: black;
border: 1px solid red;
}
.item {
width: 220px;
height: 100%;
border: 1px solid green;
margin: 15px;
background-color: sandybrown;
}
#item1 {
height: 550px;
}
#item2 {
overflow-y:scroll;
height: calc(100vh - 100px);
}
#item3 {
height: 680px;
}
.items-container {
display: flex;
}
#box-2 {
overflow-x:scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<!--<script src="https://cdn.tailwindcss.com"></script>-->
<title>Tri Column Layout</title>
</head>
<body>
<div class="sidebar">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, porro reprehenderit iure sed voluptates aperiam delectus excepturi inventore non, esse a repellat dolores obcaecati, libero dolor rerum aspernatur ullam? Nam?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error, molestias eveniet! Voluptate vel nam dolorem beatae explicabo neque reprehenderit delectus similique distinctio natus molestias, quae unde ducimus ea dolore illo quis aliquam hic consequatur incidunt quidem animi fuga eum mollitia? Veritatis temporibus magnam placeat facere deleniti dolorem consequatur praesentium! Voluptatibus cum, ducimus repudiandae, neque distinctio ad laudantium, vitae minus odit repellat praesentium ipsum laborum atque iste quibusdam perspiciatis assumenda corrupti.</p>
</div>
<div class="container">
<div class="navbar">
<h2>Header Section</h2>
</div>
<div class="fluid-container">
<div id="box1" class="box">
<h2 style="text-align: center; font-size: 2rem; margin-top: 5px;">Tri Column Title</h2>
<div class="items-container">
<div id="item1" class="item"><h2>Title 1</h2>
</div>
<div id="item2" class="item"><h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos, ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" class="item"><h2>Title 3</h2></div>
</div>
</div>
<div id="box2" class="box">
<div id="box-2" class="items-container">
<div id="item1" class="item"><h2>Title 1</h2>
</div>
<div id="item2" class="item"><h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos, ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" class="item"><h2>Title 3</h2></div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
.sidebar {
width: 12%;
height: -webkit-fill-available;
position: fixed;
top: 0;
left: 0;
background-color: black;
overflow: auto;
}
.container {
position: relative;
left: 12%;
height: 100%;
width: 100%;
/* overflow-x: scroll;
overflow-y: scroll;*/
}
.navbar {
background-color: grey;
}
.navbar h2 {
text-align: center;
}
.fluid-container {
background-color: rgb(193, 224, 236);
height: 100%;
display: flex;
width: 100%;
/* overflow-x:auto;
overflow-y: auto;*/
}
.box {
width: 100%;
background-color: black;
border: 1px solid red;
}
.item {
width: 220px;
height: 100%;
border: 1px solid green;
margin: 15px;
background-color: sandybrown;
}
#item1 {
height: 550px;
}
#item2 {
overflow-y:auto;
height: calc(100vh - 100px);
}
#item3 {
height: 680px;
}
.items-container {
display: flex;
}
#box-2 {
overflow-x:auto;
}
<div class="sidebar">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, porro reprehenderit iure sed voluptates aperiam delectus excepturi inventore non, esse a repellat dolores obcaecati, libero dolor rerum aspernatur ullam? Nam?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error, molestias eveniet! Voluptate vel nam dolorem beatae explicabo neque reprehenderit delectus similique distinctio natus molestias, quae unde ducimus ea dolore illo quis aliquam hic consequatur incidunt quidem animi fuga eum mollitia? Veritatis temporibus magnam placeat facere deleniti dolorem consequatur praesentium! Voluptatibus cum, ducimus repudiandae, neque distinctio ad laudantium, vitae minus odit repellat praesentium ipsum laborum atque iste quibusdam perspiciatis assumenda corrupti.</p>
</div>
<div class="container">
<div class="navbar">
<h2>Header Section</h2>
</div>
<div class="fluid-container">
<div id="box1" class="box">
<h2 style="text-align: center; font-size: 2rem; margin-top: 5px;">Tri Column Title</h2>
<div class="items-container">
<div id="item1" class="item"><h2>Title 1</h2>
</div>
<div id="item2" class="item"><h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos, ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" class="item"><h2>Title 3</h2></div>
</div>
</div>
<div id="box2" class="box">
<div id="box-2" class="items-container">
<div id="item1" class="item"><h2>Title 1</h2>
</div>
<div id="item2" class="item"><h2>Title 2</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem deleniti, consequuntur officiis harum, fugiat debitis dolorem reiciendis odit qui illum deserunt veniam quaerat pariatur voluptatem et earum, numquam quidem in corporis incidunt aliquam quo sunt nulla culpa. Non architecto, assumenda libero error qui nulla dicta aut sunt et, corporis nam facere nobis. Fugit excepturi sit aliquid totam corporis, iure et illo qui ipsum quo? Nam voluptates ex similique doloribus itaque minus est quasi deleniti eum aut explicabo necessitatibus porro, odit dignissimos quibusdam error velit dolores sapiente, molestias quod enim laboriosam ipsum ut. Quas error velit, quia aut, quis id facere nihil consequatur ipsum voluptatum inventore repudiandae ratione impedit deserunt aliquam dicta fugit tenetur enim soluta repellendus itaque quasi porro nostrum. Asperiores et facere itaque corporis? Asperiores animi reprehenderit nesciunt nam quasi voluptas illum ducimus iure placeat adipisci, esse ut, neque voluptates quia tempore facilis cupiditate. Possimus repellendus, officiis perspiciatis voluptas commodi laudantium iste at ipsum molestiae illo sunt, tempore veritatis magni corrupti rem omnis aperiam! Repellendus ab quia officia? Similique modi rem facilis inventore, dolorum autem soluta recusandae? Assumenda totam amet in porro aliquid quia soluta asperiores tempora voluptatem accusantium, voluptates excepturi sit maxime, tenetur reiciendis omnis error aspernatur enim, nemo ipsa commodi quis. Quaerat delectus laborum quidem molestias, sed consequatur corporis, deleniti perferendis rerum quam et expedita deserunt tempore veniam fugiat commodi! Quae quaerat aut, corporis magnam officiis explicabo nobis esse laboriosam possimus deleniti laudantium facilis temporibus itaque unde. Saepe, cupiditate quam? Doloremque id nam assumenda alias suscipit illo numquam officia facilis veniam inventore! Neque enim autem esse! Quo, pariatur explicabo aut earum exercitationem quas voluptatum illum odio debitis nisi odit dolores eum eaque ratione sequi iure eligendi reprehenderit, recusandae alias nulla. Ducimus cum esse ea, et molestias reprehenderit voluptatibus, officiis rem labore iusto reiciendis vel itaque, quaerat nisi nihil ullam officia? Libero nemo vitae qui illo animi? Doloribus incidunt hic numquam corrupti odit ex molestias, accusamus non recusandae quae animi ipsum tempore? Vel quod officiis velit praesentium sunt quibusdam temporibus cumque voluptate? Quibusdam recusandae reiciendis ratione corporis, suscipit odit quasi veniam maiores nihil id, cupiditate amet asperiores nostrum aliquid minima sit quisquam distinctio dolor saepe odio iure enim in qui optio! Autem, labore odio rem unde quisquam earum laudantium beatae, sapiente non, impedit debitis ea! Vero, aperiam molestiae minima dolor harum repudiandae soluta quae ex corrupti blanditiis cupiditate voluptates consequuntur cumque similique, a adipisci consequatur ipsum fugit eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt minima assumenda aperiam veniam et ad magnam necessitatibus praesentium ut, fugit tenetur accusamus dolorem illum eligendi vero. Qui officia blanditiis sunt totam cum odio tempore aut iste quia animi dolorem ad, consequatur libero voluptatum voluptatibus voluptates ex doloribus maxime magnam minus ipsam at harum quisquam fugiat! Dolorum dolorem itaque vero deserunt temporibus explicabo animi eum laudantium enim quidem harum quasi dolore exercitationem suscipit, dicta maxime quae esse id, sapiente earum voluptatum natus voluptas dolores! Sit quis at accusantium hic tenetur sapiente ipsa voluptatum eos, ratione suscipit adipisci eum vel tempora, vero odio unde architecto! Molestiae, expedita quidem totam architecto voluptatum tempora consectetur a fugit atque eius itaque? Nisi quo explicabo architecto, iure natus eligendi. Reiciendis ratione ipsam, deleniti assumenda iste veritatis molestias temporibus incidunt ab quia facere quod, voluptatem soluta iure nobis natus facilis expedita nostrum. Qui saepe quo quos praesentium velit sed, nemo maiores totam natus aliquam cupiditate sequi doloribus fugit dignissimos fugiat possimus. Laboriosam voluptatibus, quam eaque expedita adipisci eveniet, quae facere soluta, tempora repudiandae a vitae labore sit suscipit exercitationem numquam. Distinctio fugiat modi, laudantium corrupti aperiam, eum reiciendis ea, obcaecati assumenda consequuntur magni incidunt esse voluptate. Beatae.</p>
</div>
<div id="item3" class="item"><h2>Title 3</h2></div>
</div>
</div>
</div>
</div>
I am trying to work with intersectionObserver but it is acting wierd while trying with translationX. I wanted to translate all the .feature class form right to left as I scroll down but for some reason it is pushing contents outside of the viewport and it goes back to normal after all the items are visible.
Edit:
The above problem is occuring When i refresh page while viewing .feature class and it shows directly after refresh.
Found a solution:
Due to overflow hidden my documet was being scroll lock before the tranlation at the right side. Using animation soved my problem. :)
When I try to translate from left to right by changing
.feature{
opacity: 0;
transition: opacity 200ms ease-in,
transform 200ms ease-in;
transform: translateX(400px);
}
to
.feature{
opacity: 0;
transition: opacity 200ms ease-in,
transform 200ms ease-in;
transform: translateX(-400px);
}
it is working properly.
here is my codes.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll effect</title>
<link rel="stylesheet" href="style.css">
<script src="mian.js" defer></script>
</head>
<body>
<div class="space"></div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
<div class="grid features">
<div class="feature"><p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut deleniti aliquid obcaecati hic laudantium molestiae ea beatae maxime explicabo velit commodi, mollitia ratione corporis itaque suscipit sint eaque iure, ab doloribus quibusdam? Itaque beatae eaque nesciunt! Saepe mollitia veritatis accusamus aspernatur itaque modi alias dolores corrupti omnis odit, vero iusto repudiandae. Deleniti vel adipisci eveniet reiciendis natus? Quia iure sint debitis veritatis illo optio repellat? Blanditiis dicta atque quam possimus asperiores laudantium! Nulla modi facilis quas provident eaque hic cum obcaecati distinctio, qui soluta illo ratione expedita nihil. Distinctio voluptate qui autem. Debitis aliquid porro cupiditate accusantium, sunt quibusdam animi!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis iusto totam labore cum laborum rem amet, impedit eveniet dolorum quaerat natus magnam sed quidem ipsum suscipit velit? Corrupti eligendi cumque aliquam a tenetur, cupiditate, sint illo ut explicabo ex exercitationem reiciendis. Sapiente nostrum est voluptatum. At distinctio voluptate laboriosam? Quos voluptas blanditiis magnam quaerat sit cumque placeat possimus iure accusamus ex laudantium quasi unde, laboriosam similique ullam iste magni distinctio quis veniam eius. Magni aliquid ipsum eligendi odit cupiditate deserunt in libero laudantium, beatae hic nemo natus culpa dolore quas impedit exercitationem atque rerum! A est hic temporibus minus laborum!</p></div>
<div class="feature"><p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus est earum sit quam aliquid ratione eaque nihil magni exercitationem veritatis nemo ex, ipsum et deserunt fugit porro commodi magnam quibusdam omnis molestias tempora! Deserunt laborum rerum debitis obcaecati officia sed autem quae temporibus repellendus! Nam deleniti debitis placeat laudantium illum cupiditate repellendus, quis laboriosam distinctio repudiandae. Quibusdam deleniti inventore perspiciatis aspernatur? Officia illum neque, eos distinctio repellendus quod odio hic labore unde necessitatibus voluptates doloribus. Ea in aliquam dolorem iure. Voluptatem dolores dicta iste sed eos a exercitationem molestias ipsa, quod natus similique corrupti ipsam fuga id cupiditate reprehenderit pariatur?</p></div>
</div>
</body>
</html>
main.js
const features = document.querySelectorAll(".feature");
const observer = new IntersectionObserver(function (entries, observer) {
entries.forEach( entry => {
if (!entry.isIntersecting) {
return
}
entry.target.classList.toggle("viewed")
observer.unobserve(entry.target);
})
}, {threshold: 0, rootMargin: "-200px"})
features.forEach(feature => {
observer.observe(feature)
})
style.css
body{
overflow-x: hidden;
}
.space{
height: 100vh;
}
.grid{
display: grid;
}
.grid.features{
gap: 2rem;
grid-template-columns: repeat(3, 1fr);
}
.feature{
opacity: 0;
transition: opacity 200ms ease-in,
transform 200ms ease-in;
transform: translateX(400px);
}
.viewed{
opacity: 1 !important;
transform: translateX(0px) !important;
}
Image
I am trying to achieve a CSS Grid layout with two columns: the left column consists of a single element (e.g. a post) while the right column can have up to three posts (can have one or two, as well).
A basic example of the HTML layout would look like this:
<div class="grid">
<div class="primary">Potentially long text, but at most 1000px high...</div>
<div class="secondary">Text 1...</div>
<div class="secondary">Text 2...</div>
<div class="secondary">Text 3...</div>
</div>
Since the number of posts on the right side is dynamic, I can't really define an explicit grid with three rows, or else I will have empty grid cells if I end up with fewer than three posts.
I can't use grid-row: 1 / -1 on the left column without defining an explicit grid with three rows (at least from what I can tell).
The end goal is to have a blog post layout which features an article on the left side in full length, but only up to a specific height (e.g. 1000px, overflow hidden, text fading out), and up to three more posts on the right side with only excerpt-length of text. The columns of the grid should have equal height at all times but the right column's height should never extend the max-height set for the left column (the 1000px).
If the right side only has one or two posts, the left column should shrink accordingly. In other words, the posts on the right side should never have more whitespace than necessary because of the left column being too high.
To clarify: The height should ultimately be controlled by the right side and the posts on the right side should not be stretched if there is a very long text on the left side, instead the left side should be cut off at 1000px.
I created a codepen to illustrate my problem, or rather the situation I'm stuck in at the moment: https://codepen.io/cwardle/pen/ExZJJXL.
.grid {
display: grid;
column-gap: 1rem;
padding: 2rem;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
}
.primary {
grid-row: 1 / -1;
position: relative;
max-height: 300px;
background: #cecece;
overflow: hidden;
}
.primary:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(transparent 200px, #fff);
}
.secondary {
grid-column-start: 2;
background: #aaa;
margin-block-end: 1rem;
}
.secondary:last-child {
margin-block-end: 0;
}
<div class="grid">
<div class="primary">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo nisi, sint odio repellat id enim totam. Aliquid nobis ducimus veniam totam eos et reiciendis porro illum sequi distinctio? Aliquam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus nulla amet perferendis iure veniam? Obcaecati molestiae laborum similique voluptatibus vel libero? Molestias deserunt nemo et consequuntur quam, saepe quo ratione?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum ut aperiam molestiae cumque nam reprehenderit repellat, quas omnis, delectus possimus id. Enim delectus quasi et cumque quas, temporibus odio alias?
Sequi ullam nostrum nesciunt. Sed distinctio illo eos odit repellendus eum incidunt ex libero mollitia rerum, veritatis cumque pariatur sapiente aliquid autem maiores quia itaque voluptates quidem dolore ratione doloremque!
Ea, illum quibusdam dolores enim ex laborum voluptate repellendus nostrum dicta magnam est temporibus ipsa quisquam aut placeat cupiditate animi earum optio maiores. Eos voluptatibus ad, provident optio eligendi numquam.
Aliquam, consectetur iste eveniet ipsam iusto pariatur exercitationem, incidunt perspiciatis nostrum repudiandae, dignissimos sint quo odit! Hic unde tempore veniam temporibus dolorem totam! Velit at in, distinctio accusamus quasi minima.
Officiis fuga natus assumenda ipsa quaerat, voluptatem rerum voluptas, dicta minus odit, sit earum nobis! Recusandae labore minus rerum modi minima est totam deleniti, eligendi sint quasi adipisci at iure?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit dignissimos porro nihil commodi et libero, mollitia ipsa. Officia quidem delectus nemo magni doloribus facilis iste rerum cum eum soluta!
Omnis laboriosam illo nisi! Unde tempora exercitationem culpa, architecto dignissimos eum ratione amet doloremque, quam expedita laboriosam voluptas laborum ipsam aliquid sit saepe hic suscipit quidem illum molestiae nisi soluta.
Eveniet natus autem vitae, quasi praesentium pariatur nulla dolorem repellat? Quidem eos eum consectetur eaque mollitia laboriosam vitae libero fugit perspiciatis debitis officiis beatae, commodi odio id reprehenderit tenetur tempora.
Deserunt assumenda debitis, ullam mollitia molestias neque iste obcaecati commodi, vitae quasi laborum aperiam libero itaque eveniet eaque nihil explicabo impedit maxime, ducimus dolores. Rerum voluptate praesentium doloremque dolor autem!
Vitae eius adipisci quisquam, aliquid nemo nostrum inventore rerum molestiae iure vel officia, delectus reiciendis autem dolore, enim earum. Doloremque autem vero amet enim, possimus animi temporibus consequatur aperiam cum.
Fugit aperiam minus expedita voluptates dolor! Quia nihil ducimus dolores error aliquid totam eos alias non, cupiditate tenetur officia necessitatibus odio distinctio sequi quas nostrum, esse dolore vero consectetur earum.
Sunt ratione id totam, itaque doloremque, consectetur pariatur, quisquam deleniti expedita asperiores molestias perspiciatis eius. Rem ratione sapiente rerum eum accusamus maxime quos. Corporis, autem ipsum. At velit sunt tempora!
Animi blanditiis officia, reiciendis hic totam amet ea repellendus voluptatem quae eos! Sunt debitis pariatur perferendis harum consequatur natus cumque sapiente minus ut quae, quo reprehenderit ratione exercitationem omnis tenetur!
Nesciunt enim mollitia non rerum similique rem nisi ab corrupti, ea commodi quas! Commodi repudiandae alias reprehenderit deleniti magni repellendus voluptatibus quod aperiam, veniam laborum distinctio molestiae consequuntur corporis soluta.
Possimus dolore dolores neque distinctio obcaecati praesentium, perspiciatis saepe autem mollitia repellendus quos nulla aliquam alias temporibus, illum deleniti nesciunt, veritatis et odio. Tempore aspernatur odit, explicabo nulla totam cupiditate.
</div>
<div class="secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi doloremque tempore dicta nisi vel omnis, rem repudiandae explicabo provident voluptatibus ut magnam atque natus cumque necessitatibus quisquam. Nesciunt, minus maiores.</div>
<div class="secondary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur voluptas vel blanditiis corrupti earum, ipsa quasi corporis dignissimos doloribus sunt, laudantium exercitationem natus, sit accusamus facere quisquam suscipit reiciendis mollitia.</div>
<div class="secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab porro, animi a, molestiae expedita veritatis recusandae repudiandae eligendi id deserunt tempore tenetur unde iste, earum sed nulla quis. Fuga, minus!</div>
</div>
I would highly appreciate any help or pointers you could offer. Thanks.
position:absolute can do the job here:
.grid {
display: grid;
gap: 1rem;
padding: 2rem;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows:1fr; /* all row equal in height */
position:relative;
}
.primary {
top:2rem;
left:2rem;
bottom:2rem;
width:calc(50% - 2.5rem); /* take half the width (the first 1fr) */
position: absolute;
max-height: 300px;
background: #cecece;
overflow: hidden;
}
.primary:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(transparent 200px, #fff);
}
.secondary {
grid-column-start: 2;
background: #aaa;
}
<div class="grid">
<div class="primary">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo nisi, sint odio repellat id enim totam. Aliquid nobis ducimus veniam totam eos et reiciendis porro illum sequi distinctio? Aliquam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus nulla amet perferendis iure veniam? Obcaecati molestiae laborum similique voluptatibus vel libero? Molestias deserunt nemo et consequuntur quam, saepe quo ratione?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum ut aperiam molestiae cumque nam reprehenderit repellat, quas omnis, delectus possimus id. Enim delectus quasi et cumque quas, temporibus odio alias?
Sequi ullam nostrum nesciunt. Sed distinctio illo eos odit repellendus eum incidunt ex libero mollitia rerum, veritatis cumque pariatur sapiente aliquid autem maiores quia itaque voluptates quidem dolore ratione doloremque!
Ea, illum quibusdam dolores enim ex laborum voluptate repellendus nostrum dicta magnam est temporibus ipsa quisquam aut placeat cupiditate animi earum optio maiores. Eos voluptatibus ad, provident optio eligendi numquam.
Aliquam, consectetur iste eveniet ipsam iusto pariatur exercitationem, incidunt perspiciatis nostrum repudiandae, dignissimos sint quo odit! Hic unde tempore veniam temporibus dolorem totam! Velit at in, distinctio accusamus quasi minima.
Officiis fuga natus assumenda ipsa quaerat, voluptatem rerum voluptas, dicta minus odit, sit earum nobis! Recusandae labore minus rerum modi minima est totam deleniti, eligendi sint quasi adipisci at iure?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit dignissimos porro nihil commodi et libero, mollitia ipsa. Officia quidem delectus nemo magni doloribus facilis iste rerum cum eum soluta!
Omnis laboriosam illo nisi! Unde tempora exercitationem culpa, architecto dignissimos eum ratione amet doloremque, quam expedita laboriosam voluptas laborum ipsam aliquid sit saepe hic suscipit quidem illum molestiae nisi soluta.
Eveniet natus autem vitae, quasi praesentium pariatur nulla dolorem repellat? Quidem eos eum consectetur eaque mollitia laboriosam vitae libero fugit perspiciatis debitis officiis beatae, commodi odio id reprehenderit tenetur tempora.
Deserunt assumenda debitis, ullam mollitia molestias neque iste obcaecati commodi, vitae quasi laborum aperiam libero itaque eveniet eaque nihil explicabo impedit maxime, ducimus dolores. Rerum voluptate praesentium doloremque dolor autem!
Vitae eius adipisci quisquam, aliquid nemo nostrum inventore rerum molestiae iure vel officia, delectus reiciendis autem dolore, enim earum. Doloremque autem vero amet enim, possimus animi temporibus consequatur aperiam cum.
Fugit aperiam minus expedita voluptates dolor! Quia nihil ducimus dolores error aliquid totam eos alias non, cupiditate tenetur officia necessitatibus odio distinctio sequi quas nostrum, esse dolore vero consectetur earum.
Sunt ratione id totam, itaque doloremque, consectetur pariatur, quisquam deleniti expedita asperiores molestias perspiciatis eius. Rem ratione sapiente rerum eum accusamus maxime quos. Corporis, autem ipsum. At velit sunt tempora!
Animi blanditiis officia, reiciendis hic totam amet ea repellendus voluptatem quae eos! Sunt debitis pariatur perferendis harum consequatur natus cumque sapiente minus ut quae, quo reprehenderit ratione exercitationem omnis tenetur!
Nesciunt enim mollitia non rerum similique rem nisi ab corrupti, ea commodi quas! Commodi repudiandae alias reprehenderit deleniti magni repellendus voluptatibus quod aperiam, veniam laborum distinctio molestiae consequuntur corporis soluta.
Possimus dolore dolores neque distinctio obcaecati praesentium, perspiciatis saepe autem mollitia repellendus quos nulla aliquam alias temporibus, illum deleniti nesciunt, veritatis et odio. Tempore aspernatur odit, explicabo nulla totam cupiditate.
</div>
<div class="secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi doloremque tempore dicta nisi vel omnis, rem repudiandae explicabo provident voluptatibus ut magnam atque natus cumque necessitatibus quisquam. Nesciunt, minus maiores.</div>
<div class="secondary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur voluptas vel blanditiis corrupti earum, ipsa quasi corporis dignissimos doloribus sunt, laudantium exercitationem natus, sit accusamus facere quisquam suscipit reiciendis mollitia.</div>
<div class="secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab porro, animi a, molestiae expedita veritatis recusandae repudiandae eligendi id deserunt tempore tenetur unde iste, earum sed nulla quis. Fuga, minus!</div>
</div>
<div class="grid">
<div class="primary">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo nisi, sint odio repellat id enim totam. Aliquid nobis ducimus veniam totam eos et reiciendis porro illum sequi distinctio? Aliquam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus nulla amet perferendis iure veniam? Obcaecati molestiae laborum similique voluptatibus vel libero? Molestias deserunt nemo et consequuntur quam, saepe quo ratione?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum ut aperiam molestiae cumque nam reprehenderit repellat, quas omnis, delectus possimus id. Enim delectus quasi et cumque quas, temporibus odio alias?
Sequi ullam nostrum nesciunt. Sed distinctio illo eos odit repellendus eum incidunt ex libero mollitia rerum, veritatis cumque pariatur sapiente aliquid autem maiores quia itaque voluptates quidem dolore ratione doloremque!
Ea, illum quibusdam dolores enim ex laborum voluptate repellendus nostrum dicta magnam est temporibus ipsa quisquam aut placeat cupiditate animi earum optio maiores. Eos voluptatibus ad, provident optio eligendi numquam.
Aliquam, consectetur iste eveniet ipsam iusto pariatur exercitationem, incidunt perspiciatis nostrum repudiandae, dignissimos sint quo odit! Hic unde tempore veniam temporibus dolorem totam! Velit at in, distinctio accusamus quasi minima.
Officiis fuga natus assumenda ipsa quaerat, voluptatem rerum voluptas, dicta minus odit, sit earum nobis! Recusandae labore minus rerum modi minima est totam deleniti, eligendi sint quasi adipisci at iure?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit dignissimos porro nihil commodi et libero, mollitia ipsa. Officia quidem delectus nemo magni doloribus facilis iste rerum cum eum soluta!
Omnis laboriosam illo nisi! Unde tempora exercitationem culpa, architecto dignissimos eum ratione amet doloremque, quam expedita laboriosam voluptas laborum ipsam aliquid sit saepe hic suscipit quidem illum molestiae nisi soluta.
Eveniet natus autem vitae, quasi praesentium pariatur nulla dolorem repellat? Quidem eos eum consectetur eaque mollitia laboriosam vitae libero fugit perspiciatis debitis officiis beatae, commodi odio id reprehenderit tenetur tempora.
Deserunt assumenda debitis, ullam mollitia molestias neque iste obcaecati commodi, vitae quasi laborum aperiam libero itaque eveniet eaque nihil explicabo impedit maxime, ducimus dolores. Rerum voluptate praesentium doloremque dolor autem!
Vitae eius adipisci quisquam, aliquid nemo nostrum inventore rerum molestiae iure vel officia, delectus reiciendis autem dolore, enim earum. Doloremque autem vero amet enim, possimus animi temporibus consequatur aperiam cum.
Fugit aperiam minus expedita voluptates dolor! Quia nihil ducimus dolores error aliquid totam eos alias non, cupiditate tenetur officia necessitatibus odio distinctio sequi quas nostrum, esse dolore vero consectetur earum.
Sunt ratione id totam, itaque doloremque, consectetur pariatur, quisquam deleniti expedita asperiores molestias perspiciatis eius. Rem ratione sapiente rerum eum accusamus maxime quos. Corporis, autem ipsum. At velit sunt tempora!
Animi blanditiis officia, reiciendis hic totam amet ea repellendus voluptatem quae eos! Sunt debitis pariatur perferendis harum consequatur natus cumque sapiente minus ut quae, quo reprehenderit ratione exercitationem omnis tenetur!
Nesciunt enim mollitia non rerum similique rem nisi ab corrupti, ea commodi quas! Commodi repudiandae alias reprehenderit deleniti magni repellendus voluptatibus quod aperiam, veniam laborum distinctio molestiae consequuntur corporis soluta.
Possimus dolore dolores neque distinctio obcaecati praesentium, perspiciatis saepe autem mollitia repellendus quos nulla aliquam alias temporibus, illum deleniti nesciunt, veritatis et odio. Tempore aspernatur odit, explicabo nulla totam cupiditate.
</div>
<div class="secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi doloremque tempore dicta nisi vel omnis, rem repudiandae explicabo provident voluptatibus ut magnam atque natus cumque necessitatibus quisquam. Nesciunt, minus maiores.</div>
</div>
This appears to work for me using your snippet if I simply remove the grid-template-rows and increase the height of that container:
.grid {
display: grid;
column-gap: 1rem;
padding: 2rem;
grid-template-columns: repeat(2, 1fr);
}
.primary {
grid-row: 1 / -1;
position: relative;
max-height: 500px;
background: #cecece;
overflow: hidden;
}
.primary:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(transparent 200px, #fff);
}
.secondary {
grid-column-start: 2;
background: #aaa;
margin-block-end: 1rem;
}
.secondary:last-child {
margin-block-end: 0;
}
<div class="grid">
<div class="primary">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo nisi, sint odio repellat id enim totam. Aliquid nobis ducimus veniam totam eos et reiciendis porro illum sequi distinctio? Aliquam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus nulla amet perferendis iure veniam? Obcaecati molestiae laborum similique voluptatibus vel libero? Molestias deserunt nemo et consequuntur quam, saepe quo ratione?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum ut aperiam molestiae cumque nam reprehenderit repellat, quas omnis, delectus possimus id. Enim delectus quasi et cumque quas, temporibus odio alias?
Sequi ullam nostrum nesciunt. Sed distinctio illo eos odit repellendus eum incidunt ex libero mollitia rerum, veritatis cumque pariatur sapiente aliquid autem maiores quia itaque voluptates quidem dolore ratione doloremque!
Ea, illum quibusdam dolores enim ex laborum voluptate repellendus nostrum dicta magnam est temporibus ipsa quisquam aut placeat cupiditate animi earum optio maiores. Eos voluptatibus ad, provident optio eligendi numquam.
Aliquam, consectetur iste eveniet ipsam iusto pariatur exercitationem, incidunt perspiciatis nostrum repudiandae, dignissimos sint quo odit! Hic unde tempore veniam temporibus dolorem totam! Velit at in, distinctio accusamus quasi minima.
Officiis fuga natus assumenda ipsa quaerat, voluptatem rerum voluptas, dicta minus odit, sit earum nobis! Recusandae labore minus rerum modi minima est totam deleniti, eligendi sint quasi adipisci at iure?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit dignissimos porro nihil commodi et libero, mollitia ipsa. Officia quidem delectus nemo magni doloribus facilis iste rerum cum eum soluta!
Omnis laboriosam illo nisi! Unde tempora exercitationem culpa, architecto dignissimos eum ratione amet doloremque, quam expedita laboriosam voluptas laborum ipsam aliquid sit saepe hic suscipit quidem illum molestiae nisi soluta.
Eveniet natus autem vitae, quasi praesentium pariatur nulla dolorem repellat? Quidem eos eum consectetur eaque mollitia laboriosam vitae libero fugit perspiciatis debitis officiis beatae, commodi odio id reprehenderit tenetur tempora.
Deserunt assumenda debitis, ullam mollitia molestias neque iste obcaecati commodi, vitae quasi laborum aperiam libero itaque eveniet eaque nihil explicabo impedit maxime, ducimus dolores. Rerum voluptate praesentium doloremque dolor autem!
Vitae eius adipisci quisquam, aliquid nemo nostrum inventore rerum molestiae iure vel officia, delectus reiciendis autem dolore, enim earum. Doloremque autem vero amet enim, possimus animi temporibus consequatur aperiam cum.
Fugit aperiam minus expedita voluptates dolor! Quia nihil ducimus dolores error aliquid totam eos alias non, cupiditate tenetur officia necessitatibus odio distinctio sequi quas nostrum, esse dolore vero consectetur earum.
Sunt ratione id totam, itaque doloremque, consectetur pariatur, quisquam deleniti expedita asperiores molestias perspiciatis eius. Rem ratione sapiente rerum eum accusamus maxime quos. Corporis, autem ipsum. At velit sunt tempora!
Animi blanditiis officia, reiciendis hic totam amet ea repellendus voluptatem quae eos! Sunt debitis pariatur perferendis harum consequatur natus cumque sapiente minus ut quae, quo reprehenderit ratione exercitationem omnis tenetur!
Nesciunt enim mollitia non rerum similique rem nisi ab corrupti, ea commodi quas! Commodi repudiandae alias reprehenderit deleniti magni repellendus voluptatibus quod aperiam, veniam laborum distinctio molestiae consequuntur corporis soluta.
Possimus dolore dolores neque distinctio obcaecati praesentium, perspiciatis saepe autem mollitia repellendus quos nulla aliquam alias temporibus, illum deleniti nesciunt, veritatis et odio. Tempore aspernatur odit, explicabo nulla totam cupiditate.
</div>
<div class="secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi doloremque tempore dicta nisi vel omnis, rem repudiandae explicabo provident voluptatibus ut magnam atque natus cumque necessitatibus quisquam. Nesciunt, minus maiores.</div>
<div class="secondary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur voluptas vel blanditiis corrupti earum, ipsa quasi corporis dignissimos doloribus sunt, laudantium exercitationem natus, sit accusamus facere quisquam suscipit reiciendis mollitia.</div>
<div class="secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab porro, animi a, molestiae expedita veritatis recusandae repudiandae eligendi id deserunt tempore tenetur unde iste, earum sed nulla quis. Fuga, minus!</div>
</div>
Here it is full height, if you didn't want to fade out the content:
.grid {
display: grid;
column-gap: 1rem;
padding: 2rem;
grid-template-columns: repeat(2, 1fr);
}
.primary {
grid-row: 1 / -1;
position: relative;
background: #cecece;
overflow: hidden;
}
.secondary {
grid-column-start: 2;
background: #aaa;
margin-block-end: 1rem;
}
.secondary:last-child {
margin-block-end: 0;
}
<div class="grid">
<div class="primary">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A illo nisi, sint odio repellat id enim totam. Aliquid nobis ducimus veniam totam eos et reiciendis porro illum sequi distinctio? Aliquam.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus nulla amet perferendis iure veniam? Obcaecati molestiae laborum similique voluptatibus vel libero? Molestias deserunt nemo et consequuntur quam, saepe quo ratione?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum ut aperiam molestiae cumque nam reprehenderit repellat, quas omnis, delectus possimus id. Enim delectus quasi et cumque quas, temporibus odio alias?
Sequi ullam nostrum nesciunt. Sed distinctio illo eos odit repellendus eum incidunt ex libero mollitia rerum, veritatis cumque pariatur sapiente aliquid autem maiores quia itaque voluptates quidem dolore ratione doloremque!
Ea, illum quibusdam dolores enim ex laborum voluptate repellendus nostrum dicta magnam est temporibus ipsa quisquam aut placeat cupiditate animi earum optio maiores. Eos voluptatibus ad, provident optio eligendi numquam.
Aliquam, consectetur iste eveniet ipsam iusto pariatur exercitationem, incidunt perspiciatis nostrum repudiandae, dignissimos sint quo odit! Hic unde tempore veniam temporibus dolorem totam! Velit at in, distinctio accusamus quasi minima.
Officiis fuga natus assumenda ipsa quaerat, voluptatem rerum voluptas, dicta minus odit, sit earum nobis! Recusandae labore minus rerum modi minima est totam deleniti, eligendi sint quasi adipisci at iure?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias suscipit dignissimos porro nihil commodi et libero, mollitia ipsa. Officia quidem delectus nemo magni doloribus facilis iste rerum cum eum soluta!
Omnis laboriosam illo nisi! Unde tempora exercitationem culpa, architecto dignissimos eum ratione amet doloremque, quam expedita laboriosam voluptas laborum ipsam aliquid sit saepe hic suscipit quidem illum molestiae nisi soluta.
Eveniet natus autem vitae, quasi praesentium pariatur nulla dolorem repellat? Quidem eos eum consectetur eaque mollitia laboriosam vitae libero fugit perspiciatis debitis officiis beatae, commodi odio id reprehenderit tenetur tempora.
Deserunt assumenda debitis, ullam mollitia molestias neque iste obcaecati commodi, vitae quasi laborum aperiam libero itaque eveniet eaque nihil explicabo impedit maxime, ducimus dolores. Rerum voluptate praesentium doloremque dolor autem!
Vitae eius adipisci quisquam, aliquid nemo nostrum inventore rerum molestiae iure vel officia, delectus reiciendis autem dolore, enim earum. Doloremque autem vero amet enim, possimus animi temporibus consequatur aperiam cum.
Fugit aperiam minus expedita voluptates dolor! Quia nihil ducimus dolores error aliquid totam eos alias non, cupiditate tenetur officia necessitatibus odio distinctio sequi quas nostrum, esse dolore vero consectetur earum.
Sunt ratione id totam, itaque doloremque, consectetur pariatur, quisquam deleniti expedita asperiores molestias perspiciatis eius. Rem ratione sapiente rerum eum accusamus maxime quos. Corporis, autem ipsum. At velit sunt tempora!
Animi blanditiis officia, reiciendis hic totam amet ea repellendus voluptatem quae eos! Sunt debitis pariatur perferendis harum consequatur natus cumque sapiente minus ut quae, quo reprehenderit ratione exercitationem omnis tenetur!
Nesciunt enim mollitia non rerum similique rem nisi ab corrupti, ea commodi quas! Commodi repudiandae alias reprehenderit deleniti magni repellendus voluptatibus quod aperiam, veniam laborum distinctio molestiae consequuntur corporis soluta.
Possimus dolore dolores neque distinctio obcaecati praesentium, perspiciatis saepe autem mollitia repellendus quos nulla aliquam alias temporibus, illum deleniti nesciunt, veritatis et odio. Tempore aspernatur odit, explicabo nulla totam cupiditate.
</div>
<div class="secondary">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi doloremque tempore dicta nisi vel omnis, rem repudiandae explicabo provident voluptatibus ut magnam atque natus cumque necessitatibus quisquam. Nesciunt, minus maiores.</div>
<div class="secondary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur voluptas vel blanditiis corrupti earum, ipsa quasi corporis dignissimos doloribus sunt, laudantium exercitationem natus, sit accusamus facere quisquam suscipit reiciendis mollitia.</div>
<div class="secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab porro, animi a, molestiae expedita veritatis recusandae repudiandae eligendi id deserunt tempore tenetur unde iste, earum sed nulla quis. Fuga, minus!</div>
</div>