One fixed and another sticky in a flexbox layout along with sticky header-CodePudding

I want to have flexbox layout wherein left layout should be scrollable but it should use only window scroll not its own scroll and left layout should be sticky when we scroll left layout.

Edit: It should work with sticky header as well.

Here's the codesandbox link: https://codesandbox.io/s/morning-glade-ewojzf?file=/src/styles.css:0-564

CSS:

html,
body {
  margin: 0;
  padding: 0;
}

#header {
  position: sticky;
  top: 0;
  height: 120px;
  background-color: grey;
}

#parent {
  display: flex;
  padding: 0px 24px !important;
  gap: 24px;
  justify-content: center;
  width: 100%;
}

.box {
  width: 300px;
  height: 300px;
  background-color: yellow;
  margin: 10px;
}

#left {
  background: blue;
  display: flex;
  flex-wrap: wrap;
}

#right div {
  display: flex;
  min-width: 325px;
  width: 325px;
  overflow: hidden;
  height: 200px;
  position: sticky;
  top: 0;
  background-color: hotpink;
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

  <body>
    <div id="header">Header</div>
    <div id="parent">
      <div  id="left">
        Scrollable content, but should scroll only using the window scroll, not
        it's own scroll
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
      </div>
      <div  id="right">
        <div>
          Right Card <br />I should be sticky and my height should not be 100vh,
          it should be according to my content
        </div>
      </div>
    </div>
  </body>
</html>

PS: Don't consider this duplicate. In other solutions the scroll is coming to the scrollable div not window.

CodePudding user response：

You just need to add position: sticky for #right div. Like this:

html,
body {
  margin: 0;
  padding: 0;
}

#header {
  position: sticky;
  top: 0;
  height: 120px;
  background-color: grey;
  z-index: 99;
}

#parent {
  display: flex;
  padding: 0px 24px !important;
  gap: 24px;
  justify-content: center;
  width: 100%;
}

.box {
  width: 300px;
  height: 300px;
  background-color: yellow;
  margin: 10px;
}

#left {
  background: blue;
  display: flex;
  flex-wrap: wrap;
}

#right div {
  display: flex;
  min-width: 325px;
  width: 325px;
  overflow: hidden;
  height: 200px;
  position: sticky;
  top: 120px;
  background-color: hotpink;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

  <body>
    <div id="header">Header</div>
    <div id="parent">
      <div  id="left">
        Scrollable content, but should scroll only using the window scroll, not
        it's own scroll
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
        <div >BOX</div>
      </div>
      <div  id="right">
        <div>
          Right Card <br />I should be sticky and my height should not be 100vh,
          it should be according to my content
        </div>
      </div>
    </div>
  </body>
</html>