html - 100% 的内部 div 溢出外部 div

Question

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

Answer 1

因为您已经在该行上使用了 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>