How to fix a block with text in the center of the page on flex when scrolling?

Question

css

Now it's position: fixed, so the position is set via top/left and when scrolling, the block with text is pressed to the bottom of the page. I'm desperate. Maybe using js you can try to make a floating block?
https://codepen.io/lil012/pen/mQxwqV

Answer 1

Maybe you want this:
https://css-tricks.com/position-sticky-2/
Maybe you want this:

.textwork {
    position: fixed;
    width: 30%;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
}

And you can program the desired behavior in js.
And flexbox has nothing to do with it.