Flex项目需要滚动条，而不是主容器

时间：2016-06-10 09:04:55

标签： html css css3 flexbox

我有一个左侧菜单，它有一个固定的大小和一个主要部分，它应该占用剩下的位置并包含一个表格。如果表太大，则必须出现滚动条。

为了达到这个目的，我使用了一个弹性盒，效果很好：

enter image description here

请参阅代码段：

.h-container {
  display: flex;
  flex-direction: row;
}

.left-container {
  width: 300px;
  background-color: lightgray;
}

.container {
  overflow-x:auto;
  flex: 1;
}
<div class="h-container">

  <div class="left-container">Left menu</div>

  <div class="container">
    <table>
      <thead>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>
        <th>Column 8</th>
        <th>Column 9</th>
        <th>Column 10</th>
        <th>Column 11</th>
        <th>Column 12</th>
        <th>Column 13</th>
        <th>Column 14</th>
        <th>Column 15</th>
        <th>Column 16</th>
        <th>Column 17</th>
        <th>Column 18</th>
        <th>Column 19</th>
        <th>Column 20</th>
      </thead>
      <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>
        <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>
        <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>
        <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>
        <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>

现在，我正在尝试在表格的顶部插入横幅。为了达到这个目的，我想使用另一个柔性盒（一个嵌套在水平柔性盒中的垂直柔性盒）。

问题：<table>不再占用其容器宽度的100％。相反，它增加了容器的大小，以便在没有滚动条的情况下适应它。因此，主容器上会出现一个新的滚动条。

enter image description here

请参阅代码段：

.h-container {
  display: flex;
  flex-direction: row;
}

.left-container {
  width: 300px;
  flex-shrink:0;
  background-color: lightgray;
}

.v-container {
  flex: 1;
}

.banner {
  height: 50px;
  background-color: lightgreen;
}

.container {
  overflow-x:auto;
  flex:1;
}
<div class="h-container">

  <div class="left-container">Left menu</div>

  <div class="v-container">
  
    <div class="banner">
    Banner
    </div>
  
    <div class="container">
      <table>
        <thead>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
          <th>Column 5</th>
          <th>Column 6</th>
          <th>Column 7</th>
          <th>Column 8</th>
          <th>Column 9</th>
          <th>Column 10</th>
          <th>Column 11</th>
          <th>Column 12</th>
          <th>Column 13</th>
          <th>Column 14</th>
          <th>Column 15</th>
          <th>Column 16</th>
          <th>Column 17</th>
          <th>Column 18</th>
          <th>Column 19</th>
          <th>Column 20</th>
        </thead>
        <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>
          <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>
          <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>
          <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>
          <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>

有什么想法吗？

3 个答案:

答案 0 :(得分：1)

如何在容器上使用calc（100％ - 300px），在容器上使用100％宽度。

＆＃13;
＆＃13; 
.h-container {
  display: flex;
  flex-direction: row;
}

.left-container {
  width: 300px;
  flex-shrink:0;
  background-color: lightgray;
}

.v-container {
  /* flex: 1; */
  width: calc(100% - 300px);
}

.banner {
  height: 50px;
  background-color: lightgreen;
}

.container {
  overflow-x:auto;
  /* flex:1;*/
  width:100%;
}
＆＃13; 
<div class="h-container">

  <div class="left-container">Left menu</div>

  <div class="v-container">
  
    <div class="banner">
    Banner
    </div>
  
    <div class="container">
      <table>
        <thead>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
          <th>Column 5</th>
          <th>Column 6</th>
          <th>Column 7</th>
          <th>Column 8</th>
          <th>Column 9</th>
          <th>Column 10</th>
          <th>Column 11</th>
          <th>Column 12</th>
          <th>Column 13</th>
          <th>Column 14</th>
          <th>Column 15</th>
          <th>Column 16</th>
          <th>Column 17</th>
          <th>Column 18</th>
          <th>Column 19</th>
          <th>Column 20</th>
        </thead>
        <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>
          <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>
          <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>
          <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>
          <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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

你可以在右边的div中做另一个flexbox但是在列中：

＆＃13;
＆＃13; 
.h-container {
  display: flex;
  flex-direction: row;
}

.left-container {
  width: 300px;
  flex-shrink:0;
  background-color: lightgray;
}

.v-container {
  flex: 1;
  overflow-x:auto;
  display:flex;
  flex-direction:column;
}

.banner {
  height: 50px;
  background-color: lightgreen;
}

.container {
  overflow-x:auto;
  flex:1;
}
＆＃13; 
<div class="h-container">

  <div class="left-container">Left menu</div>

  <div class="v-container">
  
    <div class="banner">
    Banner
    </div>
  
    <div class="container">
      <table>
        <thead>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
          <th>Column 5</th>
          <th>Column 6</th>
          <th>Column 7</th>
          <th>Column 8</th>
          <th>Column 9</th>
          <th>Column 10</th>
          <th>Column 11</th>
          <th>Column 12</th>
          <th>Column 13</th>
          <th>Column 14</th>
          <th>Column 15</th>
          <th>Column 16</th>
          <th>Column 17</th>
          <th>Column 18</th>
          <th>Column 19</th>
          <th>Column 20</th>
        </thead>
        <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>
          <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>
          <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>
          <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>
          <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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

解决方案

将min-width: 0添加到.v-container（demo）。

在Chrome，FF和IE11中测试过。

说明

您正在碰到弹性项目的 隐含的最小尺寸算法 。

这是一项默认设置，可防止弹性项目缩小超过其内容的大小。

默认值为......

  • min-height: auto
  • min-width: auto

...分别用于列方向和行方向的弹性项目。

您可以使用以下方式覆盖这些设置：

  • min-height: 0
  • min-width: 0

来自规范：

  

4.5. Implied Minimum Size of Flex Items

     

为flex项提供更合理的默认最小大小，这个   规范引入了一个新的auto值作为初始值   CSS 2.1中定义的min-width和min-height属性... read more 

.h-container {
    display: flex;
    flex-direction: row;
}

.left-container {
    flex: 0 0 300px;
    background-color: lightgray;
}

.v-container {
  flex: 1;
  min-width: 0;  /* NEW */
}


.banner {
    height: 50px;
    background-color: lightgreen;
}

.container {
    overflow-x: auto;
    flex: 1;
}
<div class="h-container">
    <div class="left-container">Left menu</div>
    <div class="v-container">
        <div class="banner">Banner</div>
        <div class="container">
            <table>
                <thead>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                    <th>Column 4</th>
                    <th>Column 5</th>
                    <th>Column 6</th>
                    <th>Column 7</th>
                    <th>Column 8</th>
                    <th>Column 9</th>
                    <th>Column 10</th>
                    <th>Column 11</th>
                    <th>Column 12</th>
                    <th>Column 13</th>
                    <th>Column 14</th>
                    <th>Column 15</th>
                    <th>Column 16</th>
                    <th>Column 17</th>
                    <th>Column 18</th>
                    <th>Column 19</th>
                    <th>Column 20</th>
                </thead>
                <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>
                    <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>
                    <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>
                    <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>
                    <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>

相关问题
最新问题