如何使嵌套的<div>扩展到其内容？

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..

Answer 2

Can you make inner div float? That way it should display full width of the span but without editing outer div width to expand the content longer than outer div width will be invisible.

Answer 3

divs are block elements, so your inner div will naturally expand to the width of the containing div. You can ensure this by setting the style attribute of the inner div to 100%. You should also set its overflow CSS property to "hidden."

Answer 4

您可以获取任何HTML对象的内容宽度，如下所示：

document.getElementById("myDIV").clientWidth

Answer 5

Use display: inline-block and max-width: ?px on middle . You'll want to put overflow-x: hidden on middle (not outer like in your code), but I left it off in the demo so you could see the width working.

Demo: http://jsfiddle.net/ThinkingStiff/hHDQS/

HTML:

<div class="outer">
    <div class="middle">
        <div id="inner1"></div>
    </div>
</div>

<div class="outer">
    <div class="middle">
        <div id="inner2"></div>
    </div>
</div>

CSS:

.outer {    
    border: 1px solid green;
    height: 100px;
    width: 300px;
}

.middle {
    border: 1px solid red;
    display: inline-block;
    height: 75px;
    max-width: 300px;
}

#inner1 {
    border: 1px solid blue;
    height: 50px;
    width: 50px;
}

#inner2 {
    border: 1px solid blue;
    height: 50px;
    width: 350px;
}

Output:

Answer 6

If the inner div can be absolutely positioned the following will stretch it to fill up the parent completely (width and height):

#myInner{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:auto;
  height:auto;
}