当在 css 下面设置时,我从容器 div 中获取了 cellContentResult。
所以假设我的整个 div 是 820px
,所以整行应该有这个大小。但不幸的是,cellContentResult 也有 820px,即使 div 的其余部分占用 200px
,所以整个网站有 1020px
。
.list {
display: table;
table-layout: fixed;
width: 100%;
}
.row {
transition: all .2s ease-out;
overflow: hidden;
display: flex;
height: 3.8em;
width: 100%;
}
.defaultCellContent {
display: inline-block;
padding: 0 5px 0 5px;
vertical-align: middle;
}
.cellContentDate {
width: 8.5em;
}
.cellContentName {
text-align: center;
width: 5em;
}
.cellContentResult {
width: 100%;
}
<div class="list">
<div class="row">
<div class="cellContentIcon defaultCellContent"></div>
<div class="cellContentDate defaultCellContent">
<div>2019-01-28 06:45:33</div>
<div>2019-01-28 06:45:43</div>
</div>
<div class="cellContentName defaultCellContent">
<div class="name">task1</div>
</div>
<div class="cellContentResult defaultCellContent">
<div class="result">Finished</div>
<div class="message">Message TESTTESTEST</div>
</div>
</div>
</div>
最佳答案
因为您已经在该行上使用了 flex
,您可以在 .cellContentResult
上使用 flex: 1
,因为它是唯一的非固定宽度的单元格。这将允许它扩大或缩小以占据剩余的可用空间。
.list{
display: table;
table-layout: fixed;
width: 100%;
}
.row {
transition: all .2s ease-out;
overflow: hidden;
display: flex;
height: 3.8em;
width: 100%;
}
.defaultCellContent {
display: inline-block;
padding: 0 5px 0 5px;
vertical-align: middle;
border: 1px solid red;
}
.cellContentDate {
width: 8.5em;
}
.cellContentName {
text-align: center;
width: 5em;
}
.cellContentResult {
flex: 1;
}
<div class="list">
<div class="row">
<div class="cellContentIcon defaultCellContent"></div>
<div class="cellContentDate defaultCellContent">
<div>2019-01-28 06:45:33</div>
<div>2019-01-28 06:45:43</div>
</div>
<div class="cellContentName defaultCellContent">
<div class="name">task1</div>
</div>
<div class="cellContentResult defaultCellContent">
<div class="result">Finished</div>
<div class="message">Message TESTTESTEST</div>
</div>
</div>
</div>
关于html - 100% 的内部 div 溢出外部 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54396756/