display:table-row&overflow:在Chrome,Firefox(和IE)中自动显示不同的行为

Question

我正在研究一个项目,我正在使用display:table和table-row with overflow auto.但它在Firefox(和IE)中的表现并不像预期的那样.

在Chrome中,它的行为应该如此.

StackOverflow上有这个问题,看起来与我的问题非常相似,但没有给出答案或样本.

我试图在JSbin和Fiddle中重现这个,但那不起作用.

为了说明Chrome和Firefox中的行为,我制作了两个屏幕抓图:

我还设置了一个小型的HTML示例,可以在这里找到.您可以通过在Chrome和Firefox中打开网站来重现并扩展textarea,直到底部容器溢出页面.

码

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>

这非常令人沮丧,我希望有人知道发生了什么.

Answer 1

如果你对flex没问题，你可以使用它：( 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>