html div stops scrolling after being nested-CodePudding

Hello I have a webpage and I am trying to make a navbar with a scrollable element but whenever I try to nest the element on the left side it stops being scrollable

body {
  margin: 0;
  overflow-x: hidden;
}

#contentbg::before {
  content: "";
  background: linear-gradient(to bottom, rgb(0, 0, 0, 0.1), rgb(0, 0, 0, 0.3));
  position: absolute;
  width: 10px;
  height: 100%;
  z-index: -1;
  filter: blur(10px);
}

.display {
  border: solid red 1px;
}

.flex {
  display: flex;

  .align {
    flex-grow: 1;
  }
}

<!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>Side Script</title>
    <link rel="stylesheet" href="./Stylesheets/style.css">
    <link rel="icon" href="./Assets/Images/SideScript S.png">
    <script src="./Scripts/SearchHandler.js"></script>
    <script src="./articles.js"></script>
</head>

<body >
    <div style="width: 280px; height: 100vh; background: whitesmoke; position: relative; z-index: -1;">
        <div id="logoBlock" 
            style="flex-direction: column; position: relative; z-index: -1; background: white; width: 280px; height: 230px;">
        </div>

        <div  style="position: relative; height: 300px; width: 100px; overflow: scroll;">
            <div style="height: 30px; width: 100px;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi est molestias optio necessitatibus, nesciunt, amet architecto explicabo voluptate placeat adipisci ea cum doloribus quae reprehenderit, ipsum porro. Autem, necessitatibus ad?</div>
        </div>
    </div>

    <div >
        <div id="contentbg" style="position: absolute; width: 30px; height: 100%; background: white;"></div>
        <div  style="position: relative; height: 300px; width: 100px; overflow: scroll;">
            <div style="height: 30px; width: 100px;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi est molestias optio necessitatibus, nesciunt, amet architecto explicabo voluptate placeat adipisci ea cum doloribus quae reprehenderit, ipsum porro. Autem, necessitatibus ad?</div>
        </div>
    </div>
</body>

</html>

In the nipped I pasted to stackoverflow it works but when you try to go full screen mode it stops again

CodePudding user response：

You are using vh property for height in the left side div, which is preventing it to be scrollable. I replaced the vh with px (also changed its value) and now it is scrollable.

Check following example:

body {
  margin: 0;
  overflow-x: hidden;
}

#contentbg::before {
  content: "";
  background: linear-gradient(to bottom, rgb(0, 0, 0, 0.1), rgb(0, 0, 0, 0.3));
  position: absolute;
  width: 10px;
  height: 100%;
  z-index: -1;
  filter: blur(10px);
}

.display {
  border: solid red 1px;
  overflow: auto !important;
}

.flex {
  display: flex;
  .align {
    flex-grow: 1;
  }
}

<!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>Side Script</title>
  <link rel="stylesheet" href="./Stylesheets/style.css">
  <link rel="icon" href="./Assets/Images/SideScript S.png">
  <script src="./Scripts/SearchHandler.js"></script>
  <script src="./articles.js"></script>
</head>

<body >
  <div style="width: 280px; height: 300px; background: whitesmoke; position: relative; z-index: -1;">
    <div id="logoBlock"  style="flex-direction: column; position: relative; z-index: -1; background: white; width: 280px; height: 230px;">
    </div>

    <div  style="position: relative; height: 300px; width: 100px; overflow: scroll;">
      <div style="height: 30px; width: 100px;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi est molestias optio necessitatibus, nesciunt, amet architecto explicabo voluptate placeat adipisci ea cum doloribus quae reprehenderit, ipsum porro. Autem, necessitatibus ad?</div>
    </div>
  </div>

  <div >
    <div id="contentbg" style="position: absolute; width: 30px; height: 100%; background: white;"></div>
    <div  style="position: relative; height: 300px; width: 100px; overflow: scroll;">
      <div style="height: 30px; width: 100px;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi est molestias optio necessitatibus, nesciunt, amet architecto explicabo voluptate placeat adipisci ea cum doloribus quae reprehenderit, ipsum porro. Autem, necessitatibus ad?</div>
    </div>
  </div>
</body>

</html>