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

Question

我试图通过在孩子身上使用 start A T G C REF ALT TYPE bam.AD [1,] "chr20:5363934" "95" "29" "14" "59" "C" "T" "snp" "59,29" [2,] "chr5:8529759" "24" " 1" "28" "41" "G" "C" "snp" "28,41" [3,] "chr14:9620689" "65" "49" "41" "96" "T" "G" "snp" "49,41" [4,] "chr18:547375" "94" " 1" "51" "67" "G" "C" "snp" "51,67" [5,] "chr8:5952145" "27" "80" "25" "96" "T" "T" "snp" "80,80" [6,] "chr14:8694382" "68" "94" "26" "30" "A" "A" "snp" "68,68" [7,] "chr16:2530921" "49" "15" "79" "72" "A" "T" "snp:2530921" "49,15" [8,] "chr16:2530921" "49" "15" "79" "72" "A" "G" "snp:2530921" "49,79" [9,] "chr16:2530921" "49" "15" "79" "72" "A" "T" "snp:2530921flat" "49,94" [10,] "chr16:2533924" "42" "13" "19" "52" "G" "T" "snp:2533924flat" "19,13" [11,] "chr16:2543344" "42" "13" "13" "42" "G" "T" "snp:2543344flat" "13,55" [12,] "chr16:2543344" "42" "23" "13" "42" "G" "A" "snp:2543344" "13,42" [13,] "chr14:4214117" "73" "49" "18" "77" "G" "A" "snp" "18,73" [14,] "chr4:7799768" "36" "28" " 1" "16" "C" "A" "snp" "16,36" [15,] "chr3:9141263" "27" "41" "93" "90" "A" "A" "snp" "27,27" 将子div拉伸到父级的全高，但是我希望子宽度保持在容器内，并且子级忽略width属性并始终为100 ％宽度。

我尝试将vw添加到父级，为子级设置display: table-cell，但它似乎不会影响子div。

我有以下布局：

table-layout: fixed

以下CSS

max-width: 100px

示例：Fiddle

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

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

查看更新的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评论）

  

谢谢，但是那个孩子/子女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