Pensé en esto durante un par de días y todavía no encontré una mejor solución que con JS. Tal vez me he perdido algo. Tengo un diseño dinámico como este:

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

Lo que necesito lograr es tener BOX centrado con la ventana cuando sea posible:

• Si estoy escalando la ventana, está todo el tiempo centrado.
• La visibilidad de los paneles izquierdo y derecho se puede alternar entre visible/oculta (con animación al costado)
• Si escondo el panel izquierdo y hago las ventanas más pequeñas, entonces BOX debería estar centrado si es posible, pero si no, y el panel derecho estaría superpuesto al BOX , necesito comenzar a mover el BOX hacia la izquierda. Entonces, la prioridad es BOX centrada, pero si no es posible, muévala hacia un lado.

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

BOX es un contenido receptivo cuyo ancho podría verse afectado por la altura de la ventana (con relación de aspecto)

¿Alguna idea sin JS? Estaba pensando en FLEX y flex-shrink con poca ayuda de JS, pero no pude lograrlo.

La solución con js es clara para mí, calcularé el ancho de la ventana y el ancho de los paneles laterales y, a partir de eso, puedo calcular el desplazamiento.

Aquí está el código de lo que he intentado:

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

He añadido un panel lateral falso. El panel izquierdo no es tan importante para mí. Esto está funcionando de alguna manera, pero sigo pensando si hay alguna solución mejor sin el panel falso.