使 children 遵守 parents 宽度

Question

我有一个 div 嵌套在两个 div's 中。最外层和最内层的div有设定的宽度。我想把最外层的div'swidth设为0，这样它所有的children也都为0，或者至少不可见。
但是当我把最外面的div's width设置为0时，最里面的div是可见的。

当最外层的div's width设置为0时，如何让children遵守它的parent规则？

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

您需要将 child div 指定为 100% 宽度。你给它一个特定的宽度（200px）。通过将 child 设置为 100%，您实际上会说占用了我的 parent 所占用的空间。

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

https://jsfiddle.net/9vk44jq9/

Answer 2

您可以将 CSS overflow 属性设置为 hidden，这将剪切容器外的所有内容。

这类问题有很多微妙的变化，所以有时需要不同的解决方案。

使 children 遵守 parents 宽度

Make children abide by parents width

html

javascript

css

width

JSFiddle