html - 子 div 显示表格单元格固定宽度不起作用

Question

我试图通过在子项上使用 display: table-cell 将子项 div 拉伸(stretch)到父项的全高，但我希望子项宽度保持在容器内并且子项忽略宽度属性，并且始终为 100% 宽度。

我尝试将 table-layout: fixed 添加到父级，为子级设置 max-width: 100px 但它似乎并不影响子级 div .

我有以下布局:

<div class="parent">

  <div class="child">

    //Content Here

  </div>

</div>

和下面的 CSS

.parent {
  display: table;
  width: 100%;
}

.child {
  display: table-cell;
  width: 100px;
}

示例:Fiddle

************** 更新 **************

我能够通过在 .parent 上使用 display: flex 和 flex-direction: column 以及在 .child 上使用 flex: 1 来实现所需的行为，但是由于浏览器兼容性，我不确定这是否是最佳解决方案。

查看更新 Fiddle

Answer 1

添加一个孙子 div

这是一个片段:

.parent {
    display: table;
    width: 100%;
    background: blue;
    min-height: 500px;
}
.child {
    display: table-cell;
    padding: 5% /* demo */
}
.grand-child {
    background: white;
    width: 100px;
}

<div class="parent">
    <div class="child">
        <div class="grand-child">Blue Background not visible due to .child taking width 100%</div>
    </div>
</div>

更新(基于 OP 评论)

Thank you, but then the child/grand-child div is not full height of the parent

所以这是一个解释/解决方案:

说明:

min-height 不适用于 table elements

In CSS 2.1, the effect of min-width and max-width on tables, inline tables, table cells, table columns, and column groups is undefined.

来自 MDN :

Applies to all elements but non-replaced inline elements, table columns, and column groups

因此，您可以将 min-height 替换为 height，因为 table 总是拉伸(stretch)。

解决方案:

/* Both Single and Multiple Cells */

.parent {
  display: table;
  box-sizing:border-box; /*see vendor-prefixes */
  width: 100%;
  background: blue;
  height: 500px;
}
.child {
  display: table-cell;
}
.child .parent{
  width: 100px;
  background: white;
}


/* Multiple "Cells" extra */

  /*if you want to have more than one .child.parent display in same .row either you set them float:left or .display:inline-block (maybe with some margin-left/right) - added multiple justfor demo puposes */

.parent .multiple {
  float:left;
  margin-right:6%;
}

<h1> single "Cell" </h1>

<hr />

<div class="parent">
  <div class="child">
    <div class="parent">Blue Background not visible due to .child taking width 100%</div>
  </div>
</div>


<!--

HOW THIS CODE WORKS:

<table> // parent
    <tr> -- ommited in the code above --
        <td> //child
            <table> // child parent
            </table>
       </td>
    </tr>
</table>

-->

<h1> Multiple "Cells" </h1>

<hr />

<div class="parent">
  <div class="child">
    <div class="parent multiple">Blue Background not visible due to .child taking width 100%</div>
    <div class="parent multiple">Blue Background not visible due to .child taking width 100%</div>
    <div class="parent multiple">Blue Background not visible due to .child taking width 100%</div>
  </div>
</div>

<!--

HOW THIS CODE WORKS:

<table> // parent
    <tr> -- ommited in the code above --
        <td> //child
            <table> // child parent
            </table>
            <table> // child parent
            </table>
            <table> // child parent
            </table>
       </td>
    </tr>
</table>

-->