How to stretch an element to full width if the parent is set to position: relative?

Question

css

Hello!
Strongly do not kick - I did not find how to do it anywhere, I tried everything I knew.
Task. There are two blocks nested inside each other. The first block has position: relative, the inner one has absolute. Also, the first one has a width limit. Without changing these two attributes, the inner block must be stretched to the full width of the browser. Can someone tell me how to do it :)

<div class='first-block'>
  <div class='second-block'>
    HELLO WORLD!
  </div>
</div>

.first-block {
  width: 400px;
  height: 200px;
  position: absolute;
}
.second-block {
  width: 100%;
  height: 100px;
  position: absolute;
}

The example itself is here - codepen.io/orson/pen/QjJvaV

Answer 1

Ditch of course)
Well, set the inner width to 100vw

Answer 2

If you can change the display of the second block, then it is better to display it as fixed, then the dimensions will be set relative to the body. If they are clearly nested in each other, and you can’t change positions, then you’re typing incorrectly, such a task should not even have appeared. You need a block that will take up the entire width of the browser, you can push it to the root where relative will point to body or from any nesting but fixed. Maybe I can get something if I use flexbox but I don't know it)