HTML element rendered width not equal to set CSS width

Question

I have a set of nested HTML, elements that are made up of a parent (AssetContainer) and two main nested parts (MediaViewContainer & AssetDetailsContainer) that are side by side. The right side component (AssetDetailsContainer) has a couple of sub-divs, but they have no styling of their own. My issue is that the right side component is not rendering at the size it is styled to. The AssetDetailsContainer CSS sets a width of 600px, and this appears in the inspector, but then a different, much smaller value is used to actually render the element. If I set a larger or small value it grows and shrinks but at some non-integer scale of the value that was set. Though "Scaling" is probably a bad term as the rendered value/input value ratio is not a constant.

I'm attaching some images of the inspector panel for the main elements involved in the width, showing their HTML, CSS, and actually rendered properties. I know images aren't ideal, but these seemed to best represent the pertinent data in one place.

AssetDetailsContainer (right side child element) inspector snapshot

Looking at the resulting AssetDetailsContainer shown in the inspector we see the original 600px in the CSS, but then it's rendered as 104.5px instead.

AssetContainer (parent element) inspector snapshot

MediaViewContainer (left side child element) inspector snapshot

What am I missing here with respect to layout?

Answer 1

Turns out the solution was to nest the AssetDetailsContainer in an unstyled <div>. I think since the AssetDetailsContainer had a relative positioning property, that was not playing well with the flex positioning of the parent that was being used to create the side-by-side layout. The extra div layer seems to give it the proper segmenting of the different positioning properties and I now get the expected behavior.