主页 / coding / 问题 / 79227548
Accepted
Spook
Asked: 2024-11-27 00:29:57 +0800 CST

是否可以限制 flex-grow 容器中项目的宽度？[重复]

  • 772

我的网页主要布局如下flex flex-row。左栏包含侧面板，右栏设置为grow包含主要内容。

问题是，当屏幕宽度太小时，主列中的宽表会导致列超出屏幕宽度。我希望它们包含滚动条。

<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;">&nbsp;</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>

在上面的代码片段中，深灰色列的宽度应为 50px，浅灰色列的宽度应为 150px。但表格却超出了右列的宽度，导致左列缩小。通常情况下，右列会横跨页面的其余部分 - 强制宽度为 200px 可模拟浏览器的缩小尺寸。

是否可以保持基于弹性的布局，但以某种方式限制项目以使其不会导致其父列增大？

html

1 个回答

  1. Best Answer

    添加min-width:0到您的.grow元素。

    <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;">&nbsp;</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>

    • 1

相关问题