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

Question

我正在尝试通过在子级上使用display: table-cell 将子级 div 拉伸到父级的完整高度，但我希望子级宽度保持在容器内，并且子级忽略 width 属性并且始终为 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

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

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

查看更新的Fiddle

Answer 1

添加孙子div

这是一个sn-p：

.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 评论）

谢谢，但是子/孙 div 不是全高 父母

所以这里有一个解释/解决方案：

解释：

min-height 不适用于table elements

在 CSS 2.1 中，min-width 和 max-width 对表格的影响， 内联表格、表格单元格、表格列和列组是 未定义。

来自MDN：

适用于所有元素，但不可替换的内联元素、表格 列和列组

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

解决办法：

/* 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>

-->

Answer 2

尝试关注

.parent {
 display: block;
 width: 100%;
 background: blue;
 min-height: 500px;
}

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

父 Div 应为 display:block

工作小提琴Here