Can't make two divs scroll together

https://codepen.io/hatttfu/pen/WNYagMO

I have a parent container with two scrollable blocks inside, one of which is absolute positioned. It's because I need to make a wrapper with border-radiuses. They both guaranteed to have the same width.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  width: 400px;
  border: 1px solid #ccc;
  height: 100px;
  overflow: auto;
  margin: 0 auto;
  position: relative;
  font-size: 18px;
  white-space: nowrap;
}

.head {
  overflow: auto;
  height: 40px;
}

.container .body {
  border: 2px solid #c4c;
  position: absolute;
  border-radius: 16px;
  right: 0;
  left: 0;
  bottom: 0;
  height: 50px;
  overflow: auto;
}

<!-- language: lang-html -->

<div class="container">
  <div class="head">
    we like it, but a person who isn't familiar with his story may have some difficulty seeing how it would be so fitting, but it's hard to ignore the similarities between this dog and cat.
  </div>
  <div class="body">
    we like it, but a person who isn't familiar with his story may have some difficulty seeing how it would be so fitting, but it's hard to ignore the similarities between this dog and cat.
  </div>
</div>

<!-- end snippet -->

I tried to fix it with JS by calculating scrollLeft of one block and assigning this value to another's scrollLeft. It's working but flickering and it feels like it's not a proper solution. Is there a way to make both of them scroll synchronously as one block without JS?

An idea can be :

• to have only one overflow at container level
• manage the wrapper in
  the body part as a container::before element
• the wrapper have a position: sticky
• the body and the head a position: absolute to place them vertically

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  width: 400px;
  border: 1px solid #ccc;
  height: 100px;
  overflow: auto;
  margin: 0 auto;
  position: relative;
  font-size: 18px;
  white-space: nowrap;
  overflow: auto;
  position: relative;
}

.container::before {
  content: ' ';
  border: 2px solid #c4c;
  position: sticky;
  border-radius: 16px;
  display: block;
  left: 0;
  top: 50%;
  bottom: 0;
  height: 50%;
  width: 100%;
  z-index: 2;
}

.body, .head {
  position: absolute;
}

.body {
  top: 15%;
}

.head {
  top: 65%;
  z-index: 3;
}

<!-- language: lang-html -->

<div class="container">
  <div class="head">
    we like it, but a person who isn't familiar with his story may have some difficulty seeing how it would be so fitting, but it's hard to ignore the similarities between this dog and cat.
  </div>
  <div class="body">
    we like it, but a person who isn't familiar with his story may have some difficulty seeing how it would be so fitting, but it's hard to ignore the similarities between this dog and cat.
  </div>
</div>

<!-- end snippet -->

With background different on container and wrapper just play with z-index to allow body to be greater than wrapper z-index

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  width: 400px;
  border: 1px solid #ccc;
  height: 100px;
  overflow: auto;
  margin: 0 auto;
  position: relative;
  font-size: 18px;
  white-space: nowrap;
  overflow: auto;
  position: relative;
  background: blue;
}

.container::before {
  content: ' ';
  border: 2px solid #c4c;
  position: sticky;
  border-radius: 16px;
  display: block;
  left: 0;
  top: 50%;
  bottom: 0;
  height: 50%;
  width: 100%;
  background: yellow;
  z-index: 2;
}

.body, .head {
  position: absolute;
}

.body {
  top: 15%;
}

.head {
  top: 65%;
  z-index: 3;
}

<!-- language: lang-html -->

<div class="container">
  <div class="head">
    we like it, but a person who isn't familiar with his story may have some difficulty seeing how it would be so fitting, but it's hard to ignore the similarities between this dog and cat.
  </div>
  <div class="body">
    we like it, but a person who isn't familiar with his story may have some difficulty seeing how it would be so fitting, but it's hard to ignore the similarities between this dog and cat.
  </div>
</div>

<!-- end snippet -->