Início / coding / Perguntas / 79227548
Accepted
Spook
Asked: 2024-11-27 00:29:57 +0800 CST

É possível restringir a largura do item no contêiner flex-grow? [duplicado]

  • 772

O layout principal da minha página da web é definido como flex flex-row. A coluna da esquerda contém o painel lateral e a coluna da direita definida para growconter o conteúdo principal.

O problema é que quando a largura da tela é muito pequena, tabelas largas na coluna principal fazem com que a coluna cresça para fora da largura da tela. Eu gostaria que elas contivessem barras de rolagem.

<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>

No snippet acima, a coluna cinza escuro deve ter 50px de largura e a cinza claro - 150px de largura. Em vez disso, a tabela explode a largura da coluna direita e faz com que a coluna esquerda encolha. Normalmente, a coluna direita abrangeria o resto da página - forçar 200px de largura simula o encolhimento do tamanho do navegador.

É possível manter um layout flexível, mas restringir os itens de forma que eles não façam com que a coluna pai cresça?

html

1 respostas

  1. Best Answer

    Adicione min-width:0ao seu .growelemento.

    <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

relate perguntas