Thinking about this for a couple of days and still did not find a better solution than with JS. Maybe I have missed something. I have a dynamic layout like this:

--------------------WINDOW width---------------
######### ####################### #############
#       # #      content        # #           #
# left  # #                     # #   right   #
#       # #     ooooooooooo     # #           #
#       # #     o  BOX    o     # #           #
#       # #     ooooooooooo     # #           #
#       # #                     # #           #
######### ####################### #############

What I need to achieve is to have BOX centered with the window when it is possible:

• If I am scaling window it is all the time centered.
• left and right panels visibility can be toggled visible/hidden (with animation to the side)
• If I hide the left panel and make windows smaller, then BOX should be centered if possible, but if not and the right panel would be overlapping the BOX I need to start shifting the BOX to the left. So the priority is centered BOX but if it is not possible then move it to the side.

----------WINDOW width---------
################# #############
#      content  # #           #
#               # #   right   #
#   ooooooooooo # #           #
#   o  BOX    o # #           #
#   ooooooooooo # #           #
#               # #           #
################# #############

BOX is some responsive content which width could be affected by window height (with aspect ratio)

Any idea without JS? I was thinking about FLEX and flex-shrink with little JS help, but was not able to achieve.

Solution with js is clear to me, that I will compute window width and side panels width and from that, I can compute the offset.

Here is the code what I have tried:

https://codesandbox.io/s/flamboyant-tamas-n6jwg?file=/src/App.js

I have added fake side panel. Left panel is not so important for me. This is somehow working, but still thinking if there is any better solution without the fake panel.