Making outer columns of flexbox sticky - html

Question

I have content on page and I would like to make both sidebars to be sticky, something like:
I am using flex:
<div className="homePageFeed">
<div className="homePageFeedWrapper">
<HomePageFeedMenu/>
<HomePageFeedContent/>
<HomePageFeedUtil/>
</div>
</div>
.homePageFeed{
position: relative;
width: 100%;
}
.homePageFeedWrapper{
display: flex;
align-items: center;
position: relative;
height: 100%;
padding-left: 22px;
padding-right: 16px;
z-index: 30;
flex-direction: row;
}
Other components, left-sidebar:
const HomePageFeedMenu = () => {
return (
<div className="homeFeedMenu">
<ol>
<li> Mammals</li>
<li> Lizards</li>
<li> Birds</li>
<li> Spiders</li>
</ol>
</div>
)
}
export default HomePageFeedMenu;
.homeFeedMenu{
flex: 10 0 0;
width: 100%;
height: 500px;
border-right: 1px solid hsl(210,8%,35%);
}
ol{
list-style: none;
}
li{
color: hsl(210,8%,35%);
margin: 0;
}
Scrollable content ( with test item in it ):
const HomePageFeedContent = () => {
return (
<div className="homeFeedContent">
<div className="homeFeedItem">
<div className="content">
<div className="homeFeedItemTitle"><p>Animal name</p></div>
<div className="homeFeedItemContent">
Animal description
</div>
<div className="homeFeedItemMetaInfo">Age and adoption info</div>
</div>
<div className="img">Animal picture</div>
</div>
</div>
)
}
.homeFeedContent{
padding-top: 25px;
flex: 70 0 0;
width: 100%;
border-right: 1px solid hsl(210,8%,35%);
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.homeFeedItem{
width: 90%;
height: 200px;
display: flex;
margin-top:25px;
flex-direction: row;
justify-content: center;
border-bottom: 1px solid hsl(210,8%,35%);;
}
.content{
flex: 80 80 0;
display: flex;
flex-direction: column;
}
.img{
flex: 20 20 0;
width: 100%;
height: 100%;
border: 1px solid black;
}
.homeFeedItemTitle{
width: 100%;
flex: 20 20 0;
}
.homeFeedItemContent{
width: 100%;
flex: 60 60 0;
border-bottom: 1px hsl(210,8%,35%);;
}
.homeFeedItemMetaInfo{
width: 100%;
flex: 20 20 0;
}
export default HomePageFeedContent;
And right static sidebar
const HomePageFeedUtil = () => {
return (
<div className="homeFeedUtil">
</div>
)
}
export default HomePageFeedUtil;
.homeFeedUtil{
flex: 20 0 0;
width: 100%;
height: 500px;
}
Now I am trying to use sticky positioning for both sidebars, however, it does not work as they are part of the flexbox. I would also like to fix their height, as you can see I attempted to use 500px, hover when the middle flex element gets lots of element and the site become scrollable, it readjusts the position of both sidebars ( as they have fixed height ) and thus their content does not appear on top of it "column".
Are there any tricks to use both, flex and sticky positioning? Or do I need to do it without flex?
Thanks for the help!

Answer 1

I'd not use flexbox. I'd use position: sticky for the top then position: fixed for each sidebar. Use css variables to work out the width of the scrollable area. Here's an example:
body {
box-sizing: border-box;
margin: 0;
}
.main-container {
--header-height: 50px;
--header-gap: 0.5rem;
--sidebar1-width: 200px;
--sidebar2-width: 100px;
--sidebar-gap: 0.5rem;
}
.sticky-header {
position: sticky;
height: var(--header-height);
background-color: lightblue;
border: 1px solid blue;
top: 0;
z-index: 1;
}
.sticky-sidebar1 {
position: fixed;
top: var(--header-height);
left: 0;
width: var(--sidebar1-width);
height: calc(100vh - var(--header-height));
background-color: lightgreen;
border: 1px solid darkgreen;
}
.sticky-sidebar2 {
position: fixed;
top: var(--header-height);
right: 0;
width: var(--sidebar2-width);
height: calc(100vh - var(--header-height));
background-color: lightpink;
border: 1px solid darkred;
}
.scrollable-content {
border: 1px solid red;
padding: 0.25rem;
overflow: hidden;
margin-left: calc(var(--sidebar1-width) + var(--sidebar-gap));
margin-right: calc(var(--sidebar2-width) + var(--sidebar-gap));
margin-top: var(--header-gap);
}
#media only screen and (max-width: 600px) {
.main-container {
--sidebar1-width: 100px;
--sidebar2-width: 0px;
}
}
<div class='main-container'>
<div class="sticky-header">Sticky Header</div>
<div class="sticky-sidebar1">Sticky Sidebar1</div>
<div class="sticky-sidebar2">Sticky Sidebar2</div>
<div class="scrollable-content">
<h1>Scrollable Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. In eu mi bibendum neque egestas congue quisque egestas. Adipiscing enim eu turpis egestas
pretium.
Accumsan sit amet nulla facilisi morbi tempus iaculis urna id. In massa tempor nec feugiat nisl. Mattis nunc
sed
blandit libero volutpat sed. Magna ac placerat vestibulum lectus mauris ultrices eros in. Senectus et netus et
malesuada fames ac turpis egestas. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel elit
scelerisque mauris pellentesque pulvinar. Egestas egestas fringilla phasellus faucibus scelerisque eleifend
donec pretium. Tristique risus nec feugiat in fermentum posuere urna nec tincidunt. Lectus vestibulum mattis
ullamcorper velit sed. Risus ultricies tristique nulla aliquet enim tortor at auctor. Vitae congue mauris
rhoncus aenean vel elit scelerisque mauris pellentesque. Lacus suspendisse faucibus interdum posuere lorem
ipsum
dolor. Suspendisse interdum consectetur libero id. Vestibulum lorem sed risus ultricies tristique nulla
aliquet.
Nunc eget lorem dolor sed viverra ipsum nunc. Diam sit amet nisl suscipit adipiscing bibendum est.
Diam phasellus vestibulum lorem sed risus ultricies tristique. Ultrices sagittis orci a scelerisque. Iaculis
at
erat pellentesque adipiscing commodo elit at imperdiet dui. Donec enim diam vulputate ut pharetra sit.
Fringilla
urna porttitor rhoncus dolor purus. Turpis massa tincidunt dui ut ornare lectus. Et netus et malesuada fames
ac
turpis egestas maecenas pharetra. Malesuada nunc vel risus commodo viverra maecenas. Purus sit amet volutpat
consequat mauris nunc. Vel fringilla est ullamcorper eget nulla. Duis ultricies lacus sed turpis tincidunt id
aliquet risus. Arcu ac tortor dignissim convallis aenean et. Elementum nibh tellus molestie nunc non blandit
massa.
Magna sit amet purus gravida quis. Amet tellus cras adipiscing enim eu turpis egestas pretium aenean. Sagittis
nisl rhoncus mattis rhoncus urna neque. Feugiat scelerisque varius morbi enim nunc faucibus. Parturient montes
nascetur ridiculus mus mauris vitae ultricies leo. Enim nulla aliquet porttitor lacus luctus accumsan tortor
posuere. Rhoncus aenean vel elit scelerisque mauris pellentesque. Velit aliquet sagittis id consectetur purus.
Id porta nibh venenatis cras sed felis eget velit aliquet. Mattis nunc sed blandit libero. Suspendisse in est
ante in. Duis at tellus at urna condimentum mattis. Consequat semper viverra nam libero justo laoreet sit amet
cursus.
Sed turpis tincidunt id aliquet risus feugiat. Aliquam purus sit amet luctus. Suspendisse faucibus interdum
posuere lorem. Cursus turpis massa tincidunt dui ut ornare. Donec ultrices tincidunt arcu non sodales. Tellus
integer feugiat scelerisque varius morbi enim nunc faucibus. Leo integer malesuada nunc vel risus. Ut pharetra
sit amet aliquam id diam. Condimentum vitae sapien pellentesque habitant morbi tristique. Vestibulum lectus
mauris ultrices eros. Aenean sed adipiscing diam donec adipiscing tristique risus. Nulla aliquet porttitor
lacus
luctus accumsan tortor. Semper feugiat nibh sed pulvinar. Placerat in egestas erat imperdiet sed.
Pulvinar pellentesque habitant morbi tristique senectus et netus. Vitae turpis massa sed elementum tempus
egestas sed. Aliquam sem et tortor consequat id porta nibh venenatis cras. Orci dapibus ultrices in iaculis
nunc
sed augue lacus. Blandit turpis cursus in hac habitasse platea. Volutpat blandit aliquam etiam erat velit
scelerisque. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Lectus sit amet est placerat. Eu mi
bibendum neque egestas congue. Dictum non consectetur a erat nam at. Facilisis magna etiam tempor orci eu
lobortis. Sit amet venenatis urna cursus eget nunc. Sed risus pretium quam vulputate dignissim suspendisse.
Vivamus at augue eget arcu dictum. Ultricies tristique nulla aliquet enim tortor. Gravida neque convallis a
cras
semper auctor neque.
Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Est lorem ipsum dolor sit amet. Tempor
orci dapibus ultrices in iaculis nunc. Lorem ipsum dolor sit amet consectetur adipiscing. Volutpat diam ut
venenatis tellus in metus vulputate eu. Sed nisi lacus sed viverra tellus. Penatibus et magnis dis parturient.
Ipsum consequat nisl vel pretium lectus quam. Mollis aliquam ut porttitor leo a diam. Cras sed felis eget
velit.
Euismod lacinia at quis risus. Neque viverra justo nec ultrices dui. Pellentesque habitant morbi tristique
senectus et netus et. Pharetra vel turpis nunc eget lorem dolor. Ac auctor augue mauris augue neque gravida
in.
</p>
</div>
</div>

Answer 2

For the result you are looking for you would need to use position: fixed; in your css for all 3 elements you want to be fixed;
For your top header it would be something like:
#enterIDhere {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
margin: 0 auto;
}
For your left sidebar it would be something like:
#EnterIDhere {
position: fixed;
left: 0;
bottom: 0;
}
and last but not least your right sidebar would need something like:
#EnterIDhere {
position: fixed;
right: 0;
bottom: 0;
}