What you are trynna do is when you drag the container on the right it will get wider and the .aside will get narrower. However you gave .aside a fix width value of 500px which stops it from shrinking.

You need to change your stylesheet of .aside into:

.aside {
background: #aaa;
height: 100%;
min-width: 320px;
flex-grow: 1;
}

So that the flex layout can shrink its width to give the container space to grow

Meanwhile you passed an empty array into dependency of useLayoutEffect hook which will only execute once before the browser paints the screen when the container.current is null

add dependency to the useLayoutEffect:

useLayoutEffect(() => {...}, [container.current]); 

this way it will execute when the container ref is bound with the element