I'm facing an issue where the div container is not extending over the entire HTML page with a horizontal scroll bar. Here's a visual representation of my problem:
Despite using MathJax to display math formulas, the div container does not extend when a horizontal scrollbar is needed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type='text/x-mathjax-config'>
MathJax.Hub.Config({
showMathMenu: false,
jax: ['input/TeX','output/HTML-CSS'],
displayAlign: "left",
extensions: ['tex2jax.js','toMathML.js'],
TeX: { extensions: ['AMSmath.js','AMSsymbols.js','noErrors.js','noUndefined.js'] },
});
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js"></script>
<style>
.titulo{
width:100%;
border-bottom:solid 2px;
border-color: black;
background-color:lightgrey;
font-family:arial;
font-weight:bold;
white-space:nowrap;
}
</style>
</head>
<body>
<div class="titulo">Data</div>
<div>$$\vec{v_r}=\vec{v_1}+\vec{v_2}\\\vec{v_r}=\left(x_1+x_2,\;y_1+y_2\right)$$</span>
<div class="titulo">Operations</div>
<div>$$\vec{v_1}=\left(1000000,\;3000000\right)\\\vec{v_2}=\left(500000,\;2000000\right)\\\vec{v_1}=\left(1000000,\;3000000\right)\\\vec{v_2}=\left(500000,\;2000000\right)\\\vec{v_1}=\left(1000000,\;3000000\right)\\\vec{v_2}=\left(500000,\;2000000\right)\\\vec{v_r}=\left(1000000,\;3000000\right)+\left(500000,\;2000000\right)\\\vec{v_r}=\left(1000000+500000,\;3000000+2000000\right)\\\vec{v_r}=\left(1500000,\;5000000\right)$$</div>
</body>
</html>
Looking for solutions to resolve this issue and ensure that the div container extends properly over the whole page despite the need for a horizontal scrollbar.