100vh doesn't follow sibling content height-CodePudding

I have this structure

<div className="container">
  <div className="sidebar">
    <div className="sidebar-item"></div>
    <div className="sidebar-item"></div>
    <div className="sidebar-item"></div>
    <div className="sidebar-item"></div>
    <div className="sidebar-item"></div>
    <div className="sidebar-item"></div>
    <div className="sidebar-item"></div>
    <div className="sidebar-item"></div>
  </div>
  <div className="preview">Start editing to see some magic happen!</div>
</div>

and this css

.container {
  display: flex;
  gap: 20px;
}

.sidebar {
  width: 100px;
  border: 1px solid;
  overflow-x: scroll;
  height: 100vh;
}

.sidebar-item {
  margin: 10px;
  border: 1px solid;
  height: 80px;
  margin-bottom: 10px;
}

.preview {
  border: 1px solid;
  height: 600px;
}

I expect the sidebar height to follow the preview height, I can't set it to be 600px because it could be dynamic. In this case I wonder why using height: 100vh doesn't work, it seems shorter;

CodePudding user response：

Because 100vh is 100% of the viewport, not any parent or sibling elements. If you want a 600px high preview section, with a sidebar next to it that overflows after exceeding that height, apply the height to the container element instead. The flex box defaults will make the children of the container 100% in height.

.container {
  display: flex;
  gap: 20px;
  height: 600px;
}

.sidebar {
  width: 100px;
  border: 1px solid red;
  overflow-x: scroll;
}

.sidebar-item {
  margin: 10px;
  border: 1px solid blue;
  height: 80px;
  margin-bottom: 10px;
}

.preview {
  border: 1px solid green;
}

<div >
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <div >Start editing to see some magic happen!</div>
</div>