基于Flexbox实现固定菜单+表格：如何让表头不超表格宽度？

我需要用Flexbox实现这样的布局：

• 左侧菜单固定宽度
• 右侧表格区域自适应扩展
• 表头内容过长时必须被截断，不能超出表格容器宽度（表格可以拉伸容器，但表头不行）

布局示意图：

+----+--------+
|menu| header |
|    +--------+
|    | table  |
+----+--------+

单列布局时这个效果很容易实现，代码如下：

<html>
<style>
    td {
        font-size: 60px;

    }
    .container {
        font-size: 60px;
        background-color: yellow;
        display: flex;
        flex-direction: column;
    }
    .item1 {
        background-color: red;
        white-space: nowrap;
        overflow: hidden;

    }
    .item2 {
        background-color: blue;

    }
</style>
<body>

<div class="container">
  <div class="item1">Item 1 bla bla blaaas asd das dsa das das aaaaaaaaa</div>
  <div class="item2">
    <table>
      <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
    </table>

  </div>
</div>
</body>
</html>

但加上左侧菜单后，表头的截断效果就失效了，代码如下：

<html>
<style>
    .main {
        display: flex;
    }
    .menu {
        background-color: #222222;
        width: 200px;
    }

    td {
        font-size: 60px;
    }

    .container {
        font-size: 60px;
        background-color: yellow;
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .item1 {
        background-color: red;
        white-space: nowrap;
        overflow: hidden;

    }

    .item2 {
        background-color: blue;

    }
</style>
<body>
<div class="main">
  <div class="menu">
    menu
  </div>

  <div class="container">
    <div class="item1">Item 1 bla bla blaaas asd das dsa das das aaaaaaaaa</div>
    <div class="item2">
      <table>
        <tr>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
        </tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>

问题出在外层的.main flex容器上。Flex子元素默认带有min-width: auto属性，这意味着.container会尽可能维持自身内容的宽度，不会被父容器压缩。所以即使给item1设置了overflow: hidden，由于父容器.container没有宽度限制（会跟着内容自动撑开），截断效果无法生效。

给.container添加min-width: 0（或直接设置overflow: hidden），强制它在flex容器中可以被压缩，这样item1的overflow: hidden就能正常工作。

修改后的完整代码：

<html>
<style>
    .main {
        display: flex;
    }
    .menu {
        background-color: #222222;
        width: 200px;
    }

    td {
        font-size: 60px;
    }

    .container {
        font-size: 60px;
        background-color: yellow;
        display: flex;
        flex-direction: column;
        width: 100%;
        /* 关键修改：打破flex子元素最小宽度限制 */
        min-width: 0;
    }

    .item1 {
        background-color: red;
        white-space: nowrap;
        overflow: hidden;
        /* 可选：添加省略号优化截断视觉效果 */
        text-overflow: ellipsis;
    }

    .item2 {
        background-color: blue;
    }
</style>
<body>
<div class="main">
  <div class="menu">
    menu
  </div>

  <div class="container">
    <div class="item1">Item 1 bla bla blaaas asd das dsa das das aaaaaaaaa</div>
    <div class="item2">
      <table>
        <tr>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
        </tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>

说明 #

• min-width: 0解除了flex子元素的最小宽度约束，让.container能根据父容器剩余空间收缩
• 可选的text-overflow: ellipsis可以让截断文本显示省略号，提升用户体验

内容的提问来源于stack exchange，提问作者Anton Ovsyannikov