html - 溢出导致的padding bottom : auto

Question

我正在尝试将 MathJax 内容放入带有 css 'overflow:auto' 的 div 中，以便 div 将显示长数学表达式的水平滚动条。

但是，我的行为很奇怪。现有的 div 类似于以下代码片段中的第一个。但是，当我添加 overflow:auto 时，会出现一个垂直滚动条(请参阅以下代码段中的第二个 div)。通过查看细节，我明白了，这是由于 MathJax 类引起的对齐造成的。

请注意，更改 box-sizing 或 vertical-align 属性并不能解决此问题。但是，如果我在 div 中添加 padding-bottom 或设置 overflow-y:hidden，就可以解决这个问题。但我不确定这是否是正确的方法。

任何人都可以帮助我准确理解为什么 overflow-auto 强制为 div 填充底部，为什么它不包含在 div 的高度中强制显示垂直滚动条，以及解决问题的最佳方法是什么它。谢谢

.margin-botom-zero {
  margin-bottom: 0;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.overflow-auto {
  overflow-x: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax:{inlineMath: [['$','$']]} });
</script>

<div class="red">
  <p>this is test</p>
  <p class="blue margin-botom-zero">$\dfrac{1}{2}$</p>
</div>

<br>

<div class="red overflow-auto">
  <p>this is test</p>
  <p class="blue margin-botom-zero">$\dfrac{1}{2}$</p>
</div>

Answer 1

正如我评论的那样，插件动态添加了很多代码，很难确定问题所在。这显然是由所有嵌套 span 中的一个造成的溢出问题，而且它在某种程度上是随机的。

例如，如果您将数字替换为字母，则不会出现此问题:

.margin-botom-zero {
  margin-bottom: 0;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.overflow-auto {
  overflow-x: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax:{inlineMath: [['$','$']]} });
</script>

<div class="red">
  <p>this is test</p>
  <p class="blue margin-botom-zero">$\dfrac{1}{2}$</p>
</div>

<br>

<div class="red overflow-auto">
  <p>this is test</p>
  <p class="blue margin-botom-zero">$\dfrac{1}{j}$</p>
</div>

<div class="red overflow-auto">
  <p>this is test</p>
  <p class="blue margin-botom-zero">$\dfrac{1}{9}$</p>
</div>

修复的一个思路是增加p的line-height来避免溢出。它仍然是这种特殊情况的近似解。它可能在其他情况下不起作用:

.margin-botom-zero {
  margin-bottom: 0;
  line-height: 2.7em;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.overflow-auto {
  overflow-x: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax:{inlineMath: [['$','$']]} });
</script>

<div class="red">
  <p>this is test</p>
  <p class="blue margin-botom-zero">$\dfrac{1}{2}$</p>
</div>

<div class="red overflow-auto">
  <p>this is test</p>
  <p class="blue margin-botom-zero">$\dfrac{1}{j}$</p>
</div>

<div class="red overflow-auto">
  <p>this is test</p>
  <p class="blue margin-botom-zero">$\dfrac{1}{9}$</p>
</div>