Flex grid div在表格内部改变宽度

Question

我有一个有2列的弹性网格。列应按比例固定宽度70％（main-content）和30％（side-content），因此我已相应使用flex属性：

.content {
    padding-top: 5px;
    flex: 1;
    display: flex;
    flex-direction: row;
}

.main-content {
    flex: 2;
  background-color: yellow;
}

.side-content {
    flex: 1;
    margin-left: 2px;
    padding-left: 20px;
    padding-right: 20px;
  background-color: green;
}

当我在side-content内放一张桌子时，我的问题出现了。由于某种原因，宽度发生了变化，我失去了70/30的比例。这是代码：

<div class='content'>
  <div class='main-content'>
  THIS IS A MAIN CONTENT AREA THAT SHOUDN'T CHANGE WIDTH
  </div>
  <div class='side-content'>
  THIS IS A SIDE CONTENT AREA THAT SHOUDN'T CHANGE WIDTH

  <table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>

  </tbody>

  </table>
  </div>
</div>

如何让side-content div在任何情况下都不会扩展，始终保持70/30关系？

JSFiddle here

Answer 1

你误解了Flexbox是如何工作的，你的样本都没有保持相同的关系（70％/ 30％），如果你的第一个足够大，你会发现它们没有。

原因是min-width，默认为auto并阻止弹性项目小于其内容。

如果您想要70％/ 30％

，请将规则更改为此

.main-content {
  flex: 0 0 70%;                   /*  changed  */
  background-color: yellow;
  min-width: 0;                    /*  added  */
}

.side-content {
  flex: 0 0 30%;                   /*  changed  */
  margin-left: 2px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: green;
  min-width: 0;                    /*  added  */
}

Stack snippet

.content {
  padding-top: 5px;
  flex: 1;
  display: flex;
  flex-direction: row;
}

.main-content {
  flex: 0 0 70%;                   /*  changed  */
  background-color: yellow;
  min-width: 0;                    /*  added  */
}

.side-content {
  flex: 0 0 30%;                   /*  changed  */
  margin-left: 2px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: green;
  min-width: 0;                    /*  added  */
}

<h2>
Normal behaviour
</h2>
<div class='content'>
  <div class='main-content'>
    MAIN CONTENT
  </div>
  <div class='side-content'>
    SIDE CONTENT
  </div>
</div>


<h2>
Not proportional content
</h2>
<div class='content'>
  <div class='main-content'>
    THIS IS A MAIN CONTENT AREA THAT SHOUDN'T CHANGE WIDTH
  </div>
  <div class='side-content'>
    THIS IS A SIDE CONTENT AREA THAT SHOUDN'T CHANGE WIDTH

    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
        </tr>

      </tbody>

    </table>
  </div>
</div>

或者像这样保留2个中的3个，1个中的3个。请注意，您需要同时设置 flex-grow 和 flex-shrink ，作为 flex-shrink 默认为1，并在没有剩余空间时开始播放（分配负空间）

.main-content {
  flex: 2 2 0;                     /*  changed  */
  background-color: yellow;
  min-width: 0;                    /*  added  */
}

.side-content {
  flex: 1 1 0;                     /*  changed  */
  margin-left: 2px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: green;
  min-width: 0;                    /*  added  */
}

Stack snippet

.content {
  padding-top: 5px;
  flex: 1;
  display: flex;
  flex-direction: row;
}

.main-content {
  flex: 2 2 0;                     /*  changed  */
  background-color: yellow;
  min-width: 0;                    /*  added  */
}

.side-content {
  flex: 1 1 0;                     /*  changed  */
  margin-left: 2px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: green;
  min-width: 0;                    /*  added  */
}

<h2>
Normal behaviour
</h2>
<div class='content'>
  <div class='main-content'>
    MAIN CONTENT
  </div>
  <div class='side-content'>
    SIDE CONTENT
  </div>
</div>


<h2>
Not proportional content
</h2>
<div class='content'>
  <div class='main-content'>
    THIS IS A MAIN CONTENT AREA THAT SHOUDN'T CHANGE WIDTH
  </div>
  <div class='side-content'>
    THIS IS A SIDE CONTENT AREA THAT SHOUDN'T CHANGE WIDTH

    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
        </tr>

      </tbody>

    </table>
  </div>
</div>