javascript - 让 child 遵守 parent 的宽度

Question

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

设置最外层div的宽度为0时，如何让 child 遵守其父规则？

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

您需要指定 100% 宽度的子 div。你给它一个特定的宽度(200px)。通过将 child 设置为 100%，您实际上会说占用了我 parent 拥有的那么多。

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

https://jsfiddle.net/9vk44jq9/