Non-sticky div inside sticky div

body {
  color: #fff;
  font-family: arial;
  font-weight: bold;
  font-size: 40px;
}
.main-container {
  max-width: 600px;
  margin: 0 auto;
  border: solid 10px green;
  padding: 10px;
  margin-top: 40px;
}
.main-container  {
  padding: 10px;
  background: #aaa;
  border: dashed 5px #000;
}
.main-container + {
  margin-top: 20px;
}
.main-header {
  background: #aaa;
  border-color: red;
}
.main-content {
  min-height: 1000px;
}
.main-header {
  position: sticky;
  top: 0;
}
.header-divider {
  position: sticky;
  width: 80%;
  place-self: center;
  border-radius: 100px;
  background: white;
}
/ MY CODE /
@property --_y {
  syntax: "";
  inherits: true;
  initial-value: 1; 
}
@property --h {
  syntax: "";
  inherits: true;
  initial-value: 0; 
}
.main-container {
  --h:calc(1/var(--_y)); / header height without border /
  timeline-scope:--cy;
  animation: y linear;
  animation-timeline: --cy;
  animation-range: entry 100% exit 100%; 
}
@keyframes y {to{--_y:0}}
.main-header {
  overflow: auto;
}
.main-header:before {
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  view-timeline: --cy block;
}
.header-divider {
  top: calc(var(--h)1px + 10px); / you need to account for borders /
}

  HEADER
  
INFO
  

  
MAIN CONTENT