CSS 子 100% 内部宽度

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%，我想它是父级内部宽度的 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>

Answer 2

我花了很长时间才明白你在说什么，但我想我现在明白了。当 child1 表导致出现水平滚动时，您只希望 child2 div 跨越父元素的整个宽度。

This guy 很好地解释了这个问题。阅读后，我可以看到，如果不使用 JS，您所拥有的 HTML 结构是不可能实现的。他解释说，您可以通过将inline-block 应用于父级并应用 100% 的最小宽度来做到这一点，但这仅适用于主浏览器窗口水平滚动。

如果您愿意更改 HTML，这里有一个显示表格解决方案。

#parent {
  overflow-x:auto;
  border: 1px solid black;
  /* margin for display purposes in full screen snippet viewer */
  margin-top:80px;
}
.table {
  display:table;  
  width:100%;
}
.table-row {
  display:table-row;
}
.table-cell {
  display:table-cell;
}
.child1 {
  border: 1px solid red;
}
.child2 {
  border: 1px solid blue;
}

<div id="parent"> 
  <div class="table">
    <div class="table-row">
      <div class="table-cell child1">
        I live in Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.
      </div>
    </div>
    <div class="table-row">
      <div class="table-cell child2">
        Child 2
      </div>
    </div>
  </div>
</div>

Answer 3

将box-sizing: border-box; 规则添加到#child2：

body {
  padding: 0.1px;
}

#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;
  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>

关于border-box，请看这里：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing。

Answer 4

border 属性会增加元素的宽度，因为它会增加除 td 元素之外的外层空间。

您的子 2 元素具有边框属性，这就是您获得滚动条的原因

这个stackoverflow link 解释得更好

抱歉，我完全误解了这个问题。

你在找this output

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

CSS

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

#parent {
    width : 100%;
    display :table;
}

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

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