在顯示屏上將高度設置為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;
}