width:100vw of element breaks position: sticky-CodePudding

I am trying to stretch a sticky element to size of the screen. I have the following HTML

.large {
  height: 200vw;
  width: 200vw;
}

.header {
  left: 0;
  top: 0;
  color:white;
  position: sticky;
  width: 100px;
  height: 100px;
  background: black;
}

<div >Header</div>

<div >Content</div>

The problem is that this works but the element is not stretched. If I change width:100px to width:100vw the sticky to the left breaks. So it seems like I cannot specify relative width and use sticky to the left at the same time?

CodePudding user response：

You can achieve this by adding a div around both elements and giving that div a display: inline-block;:

.container {
  display: inline-block;
}

.large {
  height: 200vw;
  width: 200vw;
}

.header {
  left: 0;
  top: 0;
  position: sticky;
  width: 100vw;
  height: 100px;
  background: black;
}

<div >
  <div ></div>
  <div ></div>
</div>