Setting height 100% on display:table won't work if a 'flex' row has too many items (only firefox)

Question

I have a table with height 100% and three rows, the first and last ones have a fixed height, and the one in the middle has no specific height so it stretches to the necessary height.

The problem is that if you fill that row with too many items, the table will be too big and it will exceeds the 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;
}

It's difficult to explain, but this fiddle demonstrates it: http://jsfiddle.net/3EjX8/127/

Resize the table with your mouse in chrome and it will behave nice (scrollbar appears inside the table). But resize it in firefox and it will have this unexpected behavior.

Maybe I'm wrong and I'm taking good part of a chrome's bug.

I'm just wondering if there is a possibility to make this behave in firefox as it does on chrome.

Thanks.

Answer 1

I made it work on both firefox, chrome.

1. Don't use display: table for this, not necessary
2. You had the id "first" two times.
3. You don't need divs inside divs
4. Use 'calc' it's a life saver.

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;
}