Question

I am using this system to try to implement a sliding window selector.
I have a <div> that is contained in another <div>. The outer <div> has a fixed size and the inner one should expand to contain its contents.

<div style="width: 25px; overflow: hidden">
    <div id="middle">
        <div style="width: 50px"></div>
    </div>
</div>

The outer <div> has a fixed size.
The middle <div> should expand to match the size of the inner <div> (the one that has width 50px)
How, using CSS or JavaScript can I ensure that the middle <div> is as wide as the inner <div>, but still gets cut off by the outer <div>?

I have tried to use JQuery to get the length of the inner <div> and then dynamically set the width of the middle <div>, but this does not consistently get the right length.

Answer 1

Div elements, by default, try to fit their container. so the middle one will try to fit its container which is the outer div.. it is not affected by content.

If you set the middle one to be display:inline-block you make it fit the contents instead of the container it that fixes the issue..