overflow auto not working - scrolling frozen

Question

I've never had this problem before, but for some reason, my 'overflow: auto' tags are not working correctly. They show scrollbars, but I can't actually scroll the scrollbars. The scrollbar appears if a section is larger than the height of the container, as it should, but the actual scrolling capability is defunct. It's as if the scrollbar is simply frozen and won't move. I've searched across the internet for why this may be happening, and couldn't find an appropriate solution. I also tried removing the 'overflow: hidden' from my parent element, thinking that it may somehow be affecting the entire code, but removing that elicited no effect whatsoever. I've also double-checked that everything has a width and height, since I know that missing those can adversely affect an overflow. I also checked the positioning of each item. (And I also know it isn't just my mouse messing up because scrolling on other sites/pages is perfectly fine)

I'm frustrated and entirely at a loss at this point, so I'm hoping extra sets of eyes may spot something that I'm missing.

Here is my project: https://codepen.io/royalstandard/pen/RwMxrLB

Main container -

.ldmainprofile {
  width: 1100px;
  height: 1400px;
  padding: 0px;
  background-image: linear-gradient(80deg, rgba(163,135,135,1.0), rgba(163,135,163,1.0));
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  z-index: -10;
}

The first "frozen" container -

.basics {
  height: 300px;
  width: 270px;
  border: 20px solid rgba(92,65,92,0.6);
  background-color: #CCC;
  border-radius: 10px;
  position: absolute;
  margin: 20px;
}

.basics ttl {
  display: block;
  font-family: aclonica;
  font-size: 22px;
  height: 22px;
  width: 250px;
  text-align: center;
  padding: 20px 10px 10px 10px;
  border-bottom: 1px dotted #888;
  color: rgba(92,65,92,0.8);
}

.basicscroll {
  height: 247px;
  width: 240px;
  background-color: #FF7777;
  padding: 0px 15px;
  overflow: auto;
}

.basics cat {
  display: block;
  font-family: poppins;
  font-size: 15px;
  text-align: left;
  margin: 10px 0px 10px 10px;
  color: rgba(92,65,92,0.6);
  letter-spacing: 1px;
  text-decoration: underline rgba(92,65,92,0.3) 4px;
}

The sections being affected so far are ".basicscroll" (currently coded with peach color as I do to clearly see what I'm working on) and ".info2 trig" at the bottom.

overflow auto not working - scrolling frozen

0 Answers