My current project combines Angular with .NET Core, and I am encountering difficulties in styling one particular component.
This component consists of a row with two columns. The first column is empty while the second column contains another row divided into multiple columns filled with random numbers. My goal is to make only the second column horizontally scrollable, leaving the first column static.
(Please note that the random number filling is purely for content demonstration purposes.)
I have attempted to use white-space: nowrap in conjunction with overflow-x: auto to enable scrolling within the desired columns, but instead of achieving the intended effect, the columns are simply stacking on top of each other.
<div class="clr-row ">
<div class="clr-col-2" style="background-color:aqua">
<span >.</span>
</div>
<div class="clr-col-10" style="overflow-x:auto; width:100%; white-space:nowrap;">
<div class="clr-row">
<div class="clr-col" style="background-color:rebeccapurple">
<span>1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </span>
</div>
<div class="clr-col" style="background-color:brown;">
<span>2 2 2 2 2</span>
</div>
<div class="clr-col" style="background-color:burlywood;">
<span>3 3 3 3 3 3 3 3 3 3 3 3 3 3</span>
</div>
<div class="clr-col" style="background-color:cadetblue;">
<span>4 4 4 4 4 </span>
</div>
<!--More columns go here-->
</div>
</div>
</div>The objective is to make only the second column, which holds a row of numerous columns with random numbers, horizontally scrollable. The first column should remain fixed.
Referencing the screenshot linked below, my current output shows the second column's rows stacked on top of each other instead of providing the expected scrolling functionality. https://i.sstatic.net/aNaeQ.jpg