Html 100%的内部分区从外部分区溢出

在css下面设置时，我从container div中获得了cellContentResult。 假设我的整个div是

820px

，那么整行应该有这个大小。但不幸的是，cellContentResult也有820px，即使是在div的其他部分，比如说

200px

，整个站点也有

1020px

.list{
显示：表格；
表布局：固定；
宽度：100%；
}
.行{
过渡：所有。2放松；
溢出：隐藏；
显示器：flex；
高度：3.8em；
宽度：100%；
}
.defaultCellContent{
显示：内联块；
填充：0 5px 0 5px；
垂直对齐：中间对齐；
}
.cellContentDate{
宽度：8.5em；
}
.cellContentName{
文本对齐：居中；
宽度：5em；
}
.cellContentResult{
宽度：100%；
}

2019-01-28 06:45:33
2019-01-28 06:45:43
任务1
完成了
消息测试员

“您必须将行级高度设置为自动；然后才能得到您想要的确切高度。”

---

}

由于您已经在该行上使用了

flex

，您可以在

上使用
flex:1
。cellContentResult

，因为它是唯一的非固定宽度单元格。这将允许它增长或收缩以占用剩余的可用空间

.list{
显示：表格；
表布局：固定；
宽度：100%；
}
.行{
过渡：所有。2放松；
溢出：隐藏；
显示器：flex；
高度：3.8em；
宽度：100%；
}
.defaultCellContent{
显示：内联块；
填充：0 5px 0 5px；
垂直对齐：中间对齐；
边框：1px纯红；
}
.cellContentDate{
宽度：8.5em；
}
.cellContentName{
文本对齐：居中；
宽度：5em；
}
.cellContentResult{
弹性：1；
}

2019-01-28 06:45:33 
2019-01-28 06:45:43 
任务1
完成了
消息测试员

当您将列表显示为“table”时，我会将“.row”显示为“table row”，并将“.defaultCellContent”显示为“table cell”。 像这样：

<style>
.list {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.row {
    transition: all .2s ease-out;
    overflow: hidden;
    display: table-row;
    height: 3.8em;
    width: 100%;
}

.defaultCellContent {
    display: table-cell;
    padding: 0 5px;
    vertical-align: middle;
    border: 1px solid silver;
}

.defaultCellContent div {
    padding: 2px 0;
}

.cellContentDate {
    width: 8.5em;
}

.cellContentName {
    text-align: center;
    width: 5em;
}

.cellContentResult {
    width: 100%;
}
</style>

.名单{
显示：表格；
表布局：固定；
宽度：100%；
边界塌陷：塌陷；
}
.行{
过渡：所有。2放松；
溢出：隐藏；
显示：表格行；
高度：3.8em；
宽度：100%；
}
.defaultCellContent{
显示：表格单元格；
填充：0 5px；
垂直对齐：中间对齐；
边框：1px纯银；
}
.defaultCellContent分区{
填充：2px0；
}
.cellContentDate{
宽度：8.5em；
}
.cellContentName{
文本对齐：居中；
宽度：5em；
}
.cellContentResult{
宽度：100%；
}

在@FrankFajardo的提示下，我可以通过以下方式实现：

.cellContentResult {
  width: calc(100% - 18em);
}

---

你想实现什么？@FrankFajardo我想避免这个问题。因为我可能想在样式中添加文本溢出。由于文本正在从站点向外扩展，我无法这样做。您正在将

width:100%

分配给

cellContentResult

，因此它将尝试占据包含块的宽度。您可能想了解如何设置。@FrankFajardo您可能是对的，但我认为当我使用em为其他列（内容）设置常量值时，CSS将为我计算cellContentResult的100%

.cellContentResult {
  width: calc(100% - 18em);
}