My horizontal scrollbar is not functioning as expected in my React app. I am currently working on a TableData component and here is the rendered JSX code:
<table>
<div className="co-table">
<div className="co-table__long">
<div className="co-table__header">
<div className="co-table__header--col">
{" "}
<span>Date d'operation</span>{" "}
</div>
<div className="co-table__header--col">
{" "}
<span>Type de Mouvement</span>{" "}
</div>
<div className="co-table__header--col">
{" "}
<span>Montant ($$) </span>{" "}
</div>
</div>
<div className="co-table__corps">
<div className="co-table__corps--head">head</div>
<div className="co-table__corps--row">
<div className="co-table__corps--column">ff</div>
<div className="co-table__corps--column">ff</div>
<div className="co-table__corps--column">ff</div>
</div>
<div className="co-table__corps--row">
<div className="co-table__corps--column">ff</div>
<div className="co-table__corps--column">ff</div>
<div className="co-table__corps--column">ff</div>
</div>
</div>
<div className="co-table__corps">
<div className="co-table__corps--head">head</div>
<div className="co-table__corps--row">
<div className="co-table__corps--column">ff</div>
<div className="co-table__corps--column">ff</div>
<div className="co-table__corps--column">ff</div>
</div>
<div className="co-table__corps--row">
<div className="co-table__corps--column">ff</div>
<div className="co-table__corps--column">ff</div>
<div className="co-table__corps--column">ff</div>
</div>
</div>
<div className="co-table__corps">
<div className="co-table__corps--head">head</div>
<div className="co-table__corps--row">
<div className="co-table__corps--column">ff</div>
<div className="co-table__corps--column">ff</div>
<div className="co-table__corps--column">ff</div>
</div>
<div className="co-table__corps--row">
<div className="co-table__corps--column">ff</div>
<div className="co-table__corps--column">ff</div>
<div className="co-table__corps--column">ff</div>
</div>
</div>
</div>
</div>
</table>
The issue involves setting up a horizontal scrollbar within the div with the class **** co-table__long **** but it doesn't seem to be functioning correctly. The total width of this element's children exceeds 700px, while the parent width is set to 300 px to enable visibility of the horizontal scrollbar, instead only the vertical scrollbar is appearing.
To have a better idea of the desired outcome, please refer to this image: https://i.sstatic.net/BH85b.png
You can access a live preview of the project here: https://codesandbox.io/s/y03696lrl9
Your assistance in resolving this matter would be greatly appreciated.