I want to achieve something like this by using flexbox CSS. The menu is fixed width, but the table can grow automatically, and the header should not exceed the table width, even if it is long. In other words, the table should be able to stretch the column containers, but the headers shouldn't.
+----+--------+ |菜单| 标题 | | +--------+ | | 表格 | +----+--------+
It can be easily implemented with just one flex column.
<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>
But when adding the menu, everything is not normal, the title is not truncated.
<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">
菜单
</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> 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
So you want the element containing the title to change in size with its sibling elements, but without affecting its own child elements.
The only way I can think of is to wrap the title text in an appropriate element - in this case
- and then useposition: absoluteto remove it from Take it out of the flow and useposition: relativeon the parent element of the title. Then you need to set some height to the title.Example
I replaced the width with
flex: 0 0 200px. This will keep the menu from changing size, always staying at 200px..main { display: flex; } .menu { background-color: #222222; flex: 0 0 200px; /*改变了*/ } td { font-size: 60px; } .container { font-size: 60px; background-color: yellow; display: flex; flex-direction: column; width: maxwidth; /*将宽度改为maxwidth*/ } .item1 { background-color: red; white-space: nowrap; overflow: hidden; position: relative; /*添加了*/ height: 1.2em; /*添加了*/ } .item1 span { position: absolute; /*添加了*/ } .item2 { background-color: blue; }