Main layout of my webpage is laid out as flex flex-row. Left column contains side panel and right column set to grow contains the main content.
The problem is that when screen width is too small, wide tables in the main column causes the column to grow outside width of the screen. I'd like them to contain scroll-bars instead.
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-row" style="width: 200px;">
<div style="background-color: gray; width: 50px;"> </div>
<div style="background-color: lightgray;" class="grow">
<div class="overflow-x-scroll">
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>In the snippet above, the dark gray column should be 50px wide and the light-gray - 150px wide. Instead the table explodes width of the right column and causes the left column to shrink. Normally the right column would span the rest of the page - forcing 200px width simulates shrinking size of the browser.
Is it possible to maintain flex-based layout, but constrain items in such way that they won't cause their parent column to grow?
Add min-width:0 to your .grow element.
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-row" style="width: 200px;">
<div style="background-color: gray; width: 50px;"> </div>
<div style="background-color: lightgray; min-width:0" class="grow">
<div class="overflow-x-scroll">
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>