display: table-row & overflow: auto show different behaviour in Chrome, Firefox (and IE)

Question

I'm working on a project and I'm using display: table and table-row with overflow auto. But it's nothing behaving as expected in Firefox (and IE).

In Chrome, it's behaving as it should though.

There's this question on StackOverflow, which seems quite similar to my problem, but no answer or samples are given.

I've tried to reproduce this in JSbin and Fiddle, but that didn't work.

To illustrate the behaviour in Chrome and Firefox I've made two screengrabs:

I have also set up a small-scale HTML example, which can be found here. You can reproduce by opening the website in Chrome and Firefox and expand the textarea until the bottom containers overflows the page.

Code

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.tableWrapper {
  display: table;
  height: 100%;
  background: darkgrey;
  table-layout: fixed;
  width: 800px;
  margin: 0 auto;
}
.textArea {
  background: #F9F9F9;
  padding: 10px 10px 5px 10px;
  margin: 10px;
}
.content {
  display: table-row;
  height: 100%;
  margin: 10px;
}
.content div {
  display: block;
  overflow: auto;
  height: calc(100% - 20px);
  height: -webkit-calc(100% - 20px);
  height: -moz-calc(100% - 20px);
  background: #ADE6DF;
  margin: 10px;
}
.content p {
  background: white;
  margin: 10px;
  padding: 5px;
}

<div class="tableWrapper">
  <div class="textArea">
    <textarea></textarea>
  </div>
  <div class="content">
    <div>
      <p>
        Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
        erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
        mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
        ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
      </p>
      <p>
        Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
        erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
        mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
        ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
      </p>
    </div>
  </div>
</div>

It's very frustrating, I hope someone knows what happening.

Answer 1

if you are okay with flex, you may use it : ( https://jsfiddle.net/x59n7Lek/ - https://jsfiddle.net/x59n7Lek/1/ )

* {
  box-sizing: border-box;
}

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

.tableWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: darkgrey;
  table-layout: fixed;
  width: 800px;
  margin: 0 auto;
  max-width: 100%;
  /*for the demo snippet */
  max-height: 100%;
  /* maybe you still want to see the content if textarea is too big ? */
  overflow: auto;
}

.textArea {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #F9F9F9;
  padding: 10px 10px 5px 10px;
  margin: 10px;
}

textarea {
  height: 100%;
  /* optionnal */
}

.content {
  margin: 10px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

.content div {
  flex: 1;
  overflow: auto;
  display: block;
  background: #ADE6DF;
  margin: 10px;
}

.content p, footer,header {
  background: white;
  margin: 10px;
  padding: 5px;
}

<div class="tableWrapper">
  <div class="textArea">
    <textarea></textarea>
  </div>
  <div class="content">
    <header>preview a bit small, test snippet in full page mode then resize window for behaviors</header>
    <div>
      <p>
        Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
        erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
        mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
        ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
      </p>
      <p>
        Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
        erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
        mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
        ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
      </p>
    </div>
    <footer>footer</footer>
  </div>
</div>