I'm trying to implement a scroll-able content layout and I managed to do it, however the scrollbar is displaying strange behavior - sometimes it cannot get clicked, sometimes the arrows do not move it, sometimes only 1 arrow can move it even though there is space to be scrolled in either direction, etc..
.content-wrapper {
display: flex;
justify-content: center;
overflow-y: scroll;
flex-grow: 1;
/* for Firefox */
min-height: 0;
}
.tsp-content {
display: flex;
flex-direction: column;
}<div class="content-wrapper"><div class="tsp-content"><div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded"><div class="MuiCardContent-root"><p>Lorem -> Ipsum (0328)</p></div><div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing"><button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button></div></div><br><div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded"><div class="MuiCardContent-root"><p>Lorem -> Ipsum (0328)</p></div><div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing"><button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button></div></div><br><div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded"><div class="MuiCardContent-root"><p>Lorem -> Ipsum (0328)</p></div><div class="MuiCardActions-root transportation-card-buttons MuiCardActions-spacing"><button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button></div></div><br><div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded"><div class="MuiCardContent-root"><p>Lorem -> Ipsum (0328)</p></div><div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing"><button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button></div></div><br><div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded"><div class="MuiCardContent-root"><p>Lorem -> Ipsum (0328)</p></div><div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing"><button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button></div></div><br><div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded"><div class="MuiCardContent-root"><p>Lorem -> Ipsum (0328)</p></div><div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing"><button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button></div></div><br><div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded"><div class="MuiCardContent-root"><p>Lorem -> Ipsum (0328)</p></div><div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing"><button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button></div></div><br><div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded"><div class="MuiCardContent-root"><p>Lorem -> Ipsum (0328)</p></div><div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing"><button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button></div></div><br><div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded"><div class="MuiCardContent-root"><p>Lorem -> Ipsum (0328)</p></div><div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing"><button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button></div></div><br><div class="MuiPaper-root MuiCard-root MuiPaper-outlined MuiPaper-rounded"><div class="MuiCardContent-root"><p>Lorem -> Ipsum (0328)</p></div><div class="MuiCardActions-root tsp-card-buttons MuiCardActions-spacing"><button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSecondary MuiButton-outlinedSizeSmall MuiButton-sizeSmall" tabindex="0" type="button"><span class="MuiButton-label">LoremIpsum</span><span class="MuiTouchRipple-root"></span></button></div></div><br></div></div>Here's the codepen: https://codepen.io/JustM/pen/PoqGNGP
