如何调整子元素的宽度而不调整CSS中父元素的宽度？

Question

I have the following:

<div class="parent">
  <div class="sizer" />
  <div class="child" />
</div>

.sizer {
width: 200px;
}

.child {
position: relative;
width: 400px;
}

I am not allowed to explicitly set the width on the parent, and I am not allowed to set the child to position:absolute .

Using CSS, is there any other way to set the width of .child to 400 without also having the width of .parent expand from 200 to 400?

Answer 1

If the parent has a set width, then it will not expand with the width of the child, even if the child's width exceeds that of the parent. See this JS Fiddle example .

.parent {
    width: 300px;
    height: 50px;
}

.child {
    width: 400px;
    height: 50px;
    position: relative;

}

---

UPDATE

I am wondering if there is any kind of hack that allows me to do it without setting width on parent

There is no way to accomplish this without the parent having some sort of width or width-like property. If you are only opposed to using the width property on the parent, you can use several width-like alternatives.

As cimmanon explained in a comment below, you could set .parent to have a max-width . It does not necessarily have to be 100% ; any max-width will do, as long as it is less than the width of the child. See this JS Fiddle example , or check out this code:

.parent {
    max-width: 200px;
} 

.child {
   width: 400px;
} 

Alternatively, you could use position:absolute and set the left and right properties. See this JS Fiddle example , or check out this code:

.parent {
    position:absolute;
    left:0;
    right:0;
} 

But remember, these are only two of the many possible alternatives. Hope this helps!

Answer 2

You could set the max-width of the parent to 100%.

http://jsfiddle.net/aFdzy/

.parent {
    max-width: 100%;
}

.child {
    width: 400%;
}