two vertical scroll bars-CodePudding

I want to remove the scrollbar inside the div without losing the look of the survey form. Is this possible? I want the elements displayed on each other and only 1 scroll bar on display

I tried overflow: scroll display: block but I haven't hacked it yet

The website im working on:

https://codepen.io/Random_user42/pen/dyKLwzE?editors=1100

CodePudding user response：

You are setting the height inner div to 100vh. Delete that line and your inner div will not show a scrollbar.

#form{
  ...
  height: 100vh;
  ...
}

CodePudding user response：

Add overflow: hidden; to hide both the horizontal and vertical scrollbar.

#form{
  overflow:hidden;
}

And if you came across to hide only vertical or only horizontal scroll-bar Then you can go ahead by following this To only hide the vertical scrollbar, or only the horizontal scrollbar, use overflow-y or overflow-x respectively!

#form {

  overflow-y: hidden; /* Hide vertical scrollbar */

  overflow-x: hidden; /* Hide horizontal scrollbar */

}

CodePudding user response：

You are setting the overflow auto change ovrflow to not show a scrollbar.

#form{
  position: relative;
  margin: auto;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  font-size: 1.2rem;
  width: 60vw;
  background-color:rgba(27, 27, 50, 0.8);
  color: white;

}