javascript - CSS child 100% INNER 宽度

Question

我有一种情况需要指定子级的宽度是父级内部宽度的 100%，而不是外部宽度，这意味着父级水平滚动。

情况看起来与此类似:

http://codepen.io/anon/pen/ygqPZG?editors=1100

HTML

<div id='parent'>
  <table id='child1'>
    <colgroup>
      <col width='400px'></col>
    </colgroup>
    <tbody>
      <tr>
        <td>Child1withareallyreallylongtitle</td>
      </tr>
    </tbody>
  </table>
  <div id='child2'>
    <p>Child 2</p>
  </div>
</div>

CSS

#parent {
  margin: 16px;
  border: 1px solid black;
  box-sizing: border-box;
  overflow-x: auto;
}

#child1 {
  width: 100%;
  border: 1px solid red;
}

#child2 {
  width: 100%;
  border: 1px solid blue;
}

当您将屏幕缩小到足够小以至于表格(chld 1)停止缩小并迫使父级溢出并因此显示滚动条时，第二个子级仍然保留父级 OUTER 宽度的 100%，我想它是父级 INNER 宽度的 100%，以便它与第一个子级(表)的宽度相同。

我想尽可能保持纯 CSS 的答案，只要 JavaScript 不依赖于窗口调整大小事件就可以了，因为 #parent 可能会因其他原因而缩小(水平兄弟增长)。

Answer 1

您必须将长标题保持为一行吗？如果没有，你可以试试这个代码；

    #parent {
      margin: 16px;
      border: 1px solid black;
      box-sizing: border-box;
       box-sizing: border-box;
    }

    #child1 {
      width: 100%;
      border:1px solid red;
      box-sizing: border-box;
      white-space: pre-wrap;
      word-break: break-all;
      word-wrap: break-word;
    }

    #child2 {
      border:1px solid blue;
      box-sizing: border-box;
    }

    <div id='parent'>
      <table id='child1'>
        <colgroup>
          <col width='400px'></col>
        </colgroup>
        <tbody>
          <tr>
            <td>Child1withareallyreallylongtitle</td>
          </tr>
        </tbody>
      </table>
      <div id='child2'>
        <p>Child 2</p>
      </div>
    </div>