html - 设置高度 100% 显示 :table won't work if a 'flex' row has too many items (only firefox)

Question

我有一张高度为 100% 的三行表格，第一行和最后一行的高度是固定的，中间的没有特定高度，所以它会拉伸(stretch)到所需的高度。

问题是如果你用太多的元素填满那一行，表格就会太大并且会超过 100%。

<div id="wrapper">
<div id="first" class="row">
    <div>
    first
    </div>
</div>

<div id="second" class="row">
  <div>


    <div style="height:50px">
    cont0
    </div>
    <div style="height:50px">
    cont1
    </div>
    <div style="height:50px">
    cont2
    </div>
    <div style="height:50px">
    cont3
    </div>
    <div style="height:50px">
    cont4
    </div>
    <div style="height:50px">
    cont5
    </div>
  </div>
</div>
<div id="first" class="row">
     <div>
    last
    </div>
</div>

html, body {height:100%; margin:0; padding:0;}

#wrapper{
   width:300px;
   height:100%;
   display:table;
}
.row 
{
   display:table-row;
}

#first
{
   height:50px;
   margin-bottom:5px;
   background-color:#F5DEB3;    
}

#second{
   background-color:#9ACD32;
}
#second > div{
  height:100%;
  border: 1px solid red;
  overflow-y: auto;
}

这很难解释，但这个 fiddle 演示了它:http://jsfiddle.net/3EjX8/127/

在 chrome 中用鼠标调整表格大小，效果会很好(滚动条出现在表格内)。但是在 firefox 中调整它的大小，它会出现这种意想不到的行为。

也许我错了，我很好地利用了 chrome 的错误。

我只是想知道是否有可能使它在 firefox 中的行为与在 chrome 中的行为一样。

谢谢。

Answer 1

我让它在 firefox 和 chrome 上都能运行。

1. 不要为此使用 display: table，没有必要
2. 您有两次“first”的 ID。
3. 你不需要 div 内的 div
4. 使用“计算器”，它是救命稻草。

http://jsfiddle.net/foreyez/p3rcyofk/

<div id="wrapper">
    <div id="first" class="row">

        first

    </div>

    <div id="second" class="row">
      <div>


        <div style="height:50px">
        cont0
        </div>
        <div style="height:50px">
        cont1
        </div>
        <div style="height:50px">
        cont2
        </div>
        <div style="height:50px">
        cont3
        </div>
        <div style="height:50px">
        cont4
        </div>
        <div style="height:50px">
        cont5
        </div>
      </div>
    </div>
    <div id="last" class="row">

        last

    </div>
</div>


html, body {height:100%; margin:0; padding:0;}
#wrapper
{
   width:300px;
   height:100%;
}


#first,#last
{
   height:50px;
   background-color:#F5DEB3;

}

#second{
   background-color:#9ACD32;
}
#second {
  height:calc(100% - 100px);
  border: 1px solid red;
  overflow-y: auto;
}