在Chrome、Firefox（以及IE）中，display：table-row和overflow：auto表现不同。

Question

我正在做一个项目，使用display:table和table-row以及overflow:auto。但在Firefox（和IE）中表现不如预期。

在Chrome中，它的表现正常。

StackOverflow上有一个this问题，似乎与我的问题相似，但没有给出答案或示例。

我尝试在JSbin和Fiddle中重现这个问题，但没有成功。

为了说明在Chrome和Firefox中的行为，我做了两个截图：

我也设置了一个小规模的HTML示例，可以在这里找到。你可以通过在Chrome和Firefox中打开网站并扩展文本区域直到底部容器溢出页面来复制它。 代码

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>

这非常令人沮丧，希望有人知道发生了什么。

- Goombah

---

我不确定这是否与匿名表格框在各个地方生成以保持布局有关（.textArea位于匿名表格行中的匿名表格单元格中，在.tableWrapper中，而.content div位于.content内的匿名表格单元格中）。 - BoltClock

@BoltClock，你有什么办法可以解决这个问题吗？ - Patrick Hofman

@Patrick Hofman：很遗憾，没有。 - BoltClock

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>

- G-Cyrillus

---

谢谢！但在大型项目中，底部容器内会有一个带水平滚动条的表格。使用这种解决方案，您首先必须向下滚动才能水平滚动。'.content div' 应该具有 overflow: auto，而不是 '.content'。如果使用 flex 可以实现此行为，我会考虑的！为了进一步说明我的意思，这就是我想要的：从：http://www.joshuahazelaar.nl/tablerow/1.png 到 http://www.joshuahazelaar.nl/tablerow/2.png - Goombah

@Goombah在内容中添加了一个标题并嵌套了更低一级的flex，如果符合您的最终结果，请参见代码更新。不确定我是否理解您所寻找的内容。 :) 这里有一个可以玩耍的示例 https://jsfiddle.net/x59n7Lek/，还有一个页脚示例 https://jsfiddle.net/x59n7Lek/1/。 - G-Cyrillus

Answer 2

这似乎可以解决问题。希望它有用。

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

 .content {
  display: table-row;
  height: 100%;
 }

 .content div {
  display: block;
  overflow: auto;
  /*
   height: calc(100% - 20px);
   height: -webkit-calc(100% - 20px);
   height: -moz-calc(100% - 20px);
  */
 height: 100%;
 background: #ADE6DF;
 margin: 10px;
 max-height: 80vh;
 min-height: 80vh;
 overflow: auto;
 }
 .content p {
  background: white;
  margin: 10px;
  padding: 5px;
 }
 .textArea {

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

 <div class="tableWrapper">
  <div class="textArea">
  <textarea></textarea>
  </div>
  <div class="content">
   <div>
    <header>preview a bit small, test snippet in full page mode then resize window for behaviors</header>

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

- 2-cents tim