我想用flexbox-css实现这样的功能。菜单是固定宽度的，但表可以增长，并且标题不应该超过表的宽度，即使它太长。换句话说，表应该能够层叠列容器，但表头不应该。
+----+--------+
|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>
因此，您希望包含标头的元素与其同级元素一起增长/收缩，而不是其自己的子元素。
我能看到的唯一方法是将标题文本包装在适当的元素中——本例中为<span>——然后在其上使用position: absolute将文本从流中拉出，将position: relative放在标题父元素上。然后你必须给收割台一些高度。
示例
我用flex: 0 0 200px替换了宽度。这将使菜单不增长或收缩，并始终保持在200像素。
.main {
display: flex;
}
.menu {
background-color: #222222;
flex: 0 0 200px; /*changed*/
}
td {
font-size: 60px;
}
.container {
font-size: 60px;
background-color: yellow;
display: flex;
flex-direction: column;
width: maxwidth; /*changed width to maxwidth*/
}
.item1 {
background-color: red;
white-space: nowrap;
overflow: hidden;
position: relative; /*added*/
height: 1.2em; /*added*/
}
.item1 span {
position: absolute; /*added*/
}
.item2 {
background-color: blue;
}<div class="main">
<div class="menu">
menu
</div>
<div class="container">
<div class="item1"><span>The quick brown fox jumped over the lazy dog</span></div>
<div class="item2">
<table>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
</div>
</div>
</div>