Is it possible to make a child element have larger width than its parent?

Question

I am just curious whether it is possible for a HTML control (eg: a table) to have larger width than its parent(eg a div) and the inner control is entirely visible? Thanks

Answer 1

It is absolutely possible. you can set the overflow css property of the parent element to visible as follows.

.parent {
    # Other Properties
    overflow : visible;
}

Now in this case if the width of a child element is more than the width of its parent it will be visible. overflow would work for both height and width. To make only the heigth or width visible you can use the overflow-x and overflow-y property (names are based on x-axis and y-axis).

Try This Working JSFiddle

UPDATE:

NOTE: As @cimmanon said the default value of the overflow property is set to visible so you may not need to set it explicitly as above. Though, My personal preference would be to set it explicitly in case i want to be sure of it.

Answer 2

A child's dimensions adapt to its parent element when the child's width is set to a percentage or auto and position is set to static or relative. So, if you want it to be larger, you can do the following things:

1. Make the child element bigger than the parent (either via width or margins)
2. Use absolute positioning
3. Don't let the child element's descendants wrap (tables fit in here)

As long as you aren't changing the ancestor elements to have an overflow that hides things (hidden), the descendants will show through.