带有不遵循弯曲宽度的表格的Flex div

Question

我在列和行中有一个flex itens的组合，如下图所示：

此图像使用以下代码构建：

<div class="container">
  <div class='header'>
    THIS IS A TEST CODE WITH TEXT
  </div>

  <div class='content'>
    <div class='leftcontent'>
      CONTENT OF LEFT SIDE
    </div>
    <div class='rightcontent'>
      CONTENT OF RIGHT SIDE
    </div>
  </div>
</div>

<br />
<br />

<div class="container">
  <div class='header'>
    THIS IS A TEST CODE WITH TABLE
  </div>

  <div class='content'>
    <div class='leftcontent'>
      <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 class='rightcontent'>
      CONTENT OF RIGHT SIDE
    </div>
  </div>
</div>

CSS：

.container {
  display: flex;
  flex-direction: column;
  background-color: grey;
  width: 100%;
  height: 200px;
}

.header {
  flex: 1;
  text-align: center;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.leftcontent {
  flex: 5;
  background-color: green;
}

.rightcontent {
  flex: 5;
  background-color: yellow;
}

上层架构是用文本进行的测试。底部模式是尝试使用左侧的表。

正如您所看到的，在底部架构中，表格大于预期，并且不遵循我的弹性规则。我知道表有一个特殊的渲染机制，但我需要帮助将表宽度设置为50％，就像仅包含文本的模式一样。在这种情况下，我需要溢出的表格显示一个水平滚动，就在内容的左侧（与表格相关，所以我可以水平滚动它，看看它的内容）。

Here is the JSFiddle for it

Answer 1

min-width默认为auto，这意味着它不会缩小到小于其内容大小。

将min-width: 0添加到left-content，它将允许缩小。

Updated fiddle

Stack snippet

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-direction: column;
  background-color: grey;
  width: 100%;
  height: 200px;
}

.header {
  flex: 1;
  text-align: center;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.leftcontent {
  min-width: 0;
  flex: 5;
  background-color: green;
}

.rightcontent {
  flex: 5;
  background-color: yellow;
}

＆＃13;

<div class="container">
  <div class='header'>
    THIS IS A TEST CODE WITH TEXT
  </div>

  <div class='content'>
    <div class='leftcontent'>
      CONTENT OF LEFT SIDE
    </div>
    <div class='rightcontent'>
      CONTENT OF RIGHT SIDE
    </div>
  </div>
</div>

<br />
<br />

<div class="container">
  <div class='header'>
    THIS IS A TEST CODE WITH TABLE
  </div>

  <div class='content'>
    <div class='leftcontent'>
      <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 class='rightcontent'>
      CONTENT OF RIGHT SIDE
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您希望能够滚动内容，请改用overflow: auto或òverflow: scroll

Stack snippet

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-direction: column;
  background-color: grey;
  width: 100%;
  height: 200px;
}

.header {
  flex: 1;
  text-align: center;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.leftcontent {
  overflow: auto;
  flex: 5;
  background-color: green;
}

.rightcontent {
  flex: 5;
  background-color: yellow;
}

＆＃13;

<div class="container">
  <div class='header'>
    THIS IS A TEST CODE WITH TEXT
  </div>

  <div class='content'>
    <div class='leftcontent'>
      CONTENT OF LEFT SIDE
    </div>
    <div class='rightcontent'>
      CONTENT OF RIGHT SIDE
    </div>
  </div>
</div>

<br />
<br />

<div class="container">
  <div class='header'>
    THIS IS A TEST CODE WITH TABLE
  </div>

  <div class='content'>
    <div class='leftcontent'>
      <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 class='rightcontent'>
      CONTENT OF RIGHT SIDE
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;