Javascript CSS子项100%内部宽度

在这种情况下，我需要指定子对象的宽度为父对象内部宽度的100%，而不是外部宽度，这意味着父对象水平滚动

情况与此类似：

HTML

当您将屏幕缩小到表（chld 1）停止收缩，并强制父级溢出，从而显示滚动条时，第二个子级仍然保留父级外部宽度的100%，我希望它是父级内部宽度的100%，以便它与第一个子级（表）的宽度相同

---

我想让答案尽可能地纯CSS，JavaScript只要不依赖于窗口大小调整事件就可以了，因为#父级可能会因为其他原因而缩小（水平同级会增长）。

添加

框大小：边框框规则到
#child2
：


正文{
填充：0.1px；
}
#母公司{
利润率：16px；
边框：1px纯黑；
框大小：边框框；
溢出-x：自动；
}
#孩子1{
宽度：100%；
边框：1px纯红；
}
#孩子2{
宽度：100%；
边框：1px纯蓝色；
框大小：边框框；
}

孩子们1都长得很长
儿童2

您必须将长标题保留为一行吗？如果没有，您可以尝试此代码


#父级{
利润率：16px；
边框：1px纯黑；
框大小：边框框；
框大小：边框框；
}
#孩子1{
宽度：100%；
边框：1px纯红；
框大小：边框框；
空白：预包装；
单词break：打破一切；
单词包装：打断单词；
}
#孩子2{
边框：1px纯蓝色；
框大小：边框框；
}

孩子们1都长得很长
儿童2

边框属性将增加元素宽度，因为它会添加到除td元素之外的外层空间

您的child 2元素具有border属性，这就是您获取滚动条的原因

这更好地解释了这一点

对不起，我完全误解了这个问题

你在找什么

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

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

如果您愿意更改HTML，下面是一个显示表解决方案


#父级{
溢出-x：自动；
边框：1px纯黑；
/*用于在全屏代码段查看器中显示的边距*/
边缘顶部：80px；
}
.桌子{
显示：表格；
宽度：100%；
}
.表格行{
显示：表格行；
}
.表格单元格{
显示：表格单元格；
}
.儿童1{
边框：1px纯红；
}
.儿童2{
边框：1px纯蓝色；
}

我住在Llanfairpwlgwyngyllgogerychwyrndrobwllllantysiliogogogoch。
儿童2
我使用*选择器将边框框应用于每个元素，因此这不是问题所在。请单击
运行代码片段
按钮并查看结果。将框大小添加到代码笔证明这根本不起任何作用。请收缩浏览器以强制父级溢出，您将看到问题所在。如问题“是”中所述，它绝对必须溢出。不，我不需要长标题，我使用长标题来演示溢出。事实上，表中大约有30列，它们都是短标题，但当它们相加时，表的最小宽度实际上相当宽，父表必须溢出。为了演示的目的，创建一个长标题比创建30列更容易。你读过这个问题吗？我想要一个与问题无关的滚动条有什么原因不能使用
display:table
、
display:table row
和
display:table cell
而不是将
child1
分到一个表中，将
child2
分到一个div中？
<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>

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

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

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