Html 将内容扩展到整个父级宽度

我想将子内容扩展到全部宽度。我什么都试过了，不知道什么能跑。 我只让它以最小宽度运行：npx；但我不想定义一个特定的像素宽度，因为这种设计在较小的屏幕上是不自适应的

HTML

---

假设您需要一个

display:table

解决方案，那么也不能将

display:block

添加到同一元素中

我猜你为什么这么做，是为了让它全宽

要使

表格

全宽，只需将其设置为100%，以便使现有标记正常工作，请从

.ficha_container

中删除

显示：块

，然后添加

宽度：100%


.ficha\u容器{
显示：表格；
背景颜色：绿色；
框大小：边框框；
宽度：100%；
}
菲查乌街{
显示：表格行；
}
ficha_细胞{
显示：表格单元格；
}
.ficha_单元p{
背景：粉红色；
}

标题
内容。

为什么使用
显示：表格行和
显示：表格单元格？否则，子div将是全宽的。您的意思是希望内容扩展到表的行之外吗？因为它已经是其父容器的全宽，即ficha_cell，为什么要在.ficha_容器上设置两次显示？如果只使用display:table；加上宽度：100%它似乎给你你想要的。
<div class="ficha_container">
  <div class="ficha_row">
    <div class="ficha_cell">
      <h1>Title</h1>
      <p>Content.</p>
    </div>
  </div>
</div>

.ficha_container {
  display: table;
  background-color: green;
  box-sizing: border-box;
  overflow: hidden;
  display: block;
}
.ficha_row {
  display: table-row;
}
.ficha_cell {
  display: table-cell;
}
.ficha_cell p {
  background: pink;
}