Make children abide by parents width

Question

I have a div nested in two div's . The outermost and innermost div has a set width. I want to make the outermost div's width to 0, so that all its children will be 0 too, or at least not visible.
But when I make the outermost div's width to 0, the innermost div is visible.

When setting the outermost div's width to 0, how can I make the children abide by its' parent rule?

JSFiddle

 var outer = document.getElementById('outer'), small = document.getElementById('small'), large = document.getElementById('large'); small.addEventListener('click', function() { outer.style.width = 0; }); large.addEventListener('click', function() { outer.style.width = '300px'; }); 

 #outer { width: 300px; background-color: orange; } #content { background-image: url("http://i.imgur.com/nri7bYd.jpg"); height: 200px; width: 200px; } #content2 { background-color: red; width: 100px; } 

 <div id="outer"> <div id="inner"> <div id="content">This is some content</div> <div id="content2">This is another content</div> </div> </div> <button id="small">width = 0</button> <button id="large">width = 300px</button> 

Answer 1

You need to specify the child div with 100% width. You are giving it a specific width (of 200px). By setting the child to 100% you will effectively say take up as much as my parent has.

#content {
    background-image: url("http://i.imgur.com/nri7bYd.jpg");
    height: 200px;
    width:100%;
}

https://jsfiddle.net/9vk44jq9/

Answer 2

You can set the CSS overflow property to hidden , which clips everything outside the container.

This sort of problem has a lot of subtle variations, so different solutions are called for sometimes.