在显示屏上将高度设置为100％：如果'flex'行中的项目过多（仅Firefox），表格将无法工作

Question

我有一张桌子，桌子的高度为100％，有三行，第一行和最后一行具有固定的高度，中间的一行没有特定的高度，因此可以延伸到必要的高度。

问题是，如果您在该行中填充了太多项目，则表将太大，并且将超过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;
}

这很难解释，但是这个小提琴对此进行了演示： http : //jsfiddle.net/3EjX8/127/

用chrome鼠标调整表的大小，它将表现良好（滚动条出现在表内部）。 但是在firefox中调整它的大小，它将具有这种意外行为。

也许我错了，而我正在承担Chrome的大部分错误。

我只是想知道是否有可能像在chrome上那样使它在firefox中表现出来。

谢谢。

Answer 1

我使它可以同时在Firefox和Chrome上使用。

1. 不要为此使用display：table
2. 您的ID为“ first”两次。
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;
}