Padding bottom caused due to overflow: auto - html

Question

I am trying to put MathJax content inside a div with the css 'overflow:auto' so that the div will show a horizontal scroll bar for long mathematical expressions.
But, i am getting a strange behavior. The existing div is like the first one in the following snippet. However when I add overflow:auto, a vertical scroll bar appear (see the second div in the following snippet). By looking into the details, I understand, it is caused due to the alignment caused by MathJax classes.
Note that, changing box-sizing or vertical-align property does not solve this issue. But, if I add a padding-bottom to the div or if i set overflow-y:hidden, this can be solved. But I am not sure if this is the right approach.
Could anyone help me to understand exactly why the overflow-auto is forcing a padding bottom for the div, why it is not included in the height of the div forcing the vertical scrollbar to appear, and what is the best way to resolve it. Thanks
.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

As I commented there is a lot of code dynamically added by the plugin and it's difficult to identify the issue. It's clearly an overflow issue created by one among all the nested span and it's somehow random.
For example, if you replace the numbers with letters you won't have the issue:
.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>
An idea of fix is to increase the line-height of p to avoid the overflow. It remains an approximate solution for this particular case. It will probably not work in other situations:
.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>