Je veux réaliser quelque chose comme ça en utilisant flexbox CSS. Le menu a une largeur fixe, mais le tableau peut s'agrandir automatiquement et l'en-tête ne doit pas dépasser la largeur du tableau, même s'il est long. En d’autres termes, le tableau doit pouvoir étirer les conteneurs de colonnes, mais pas les en-têtes.
+----+--------+ |菜单| 标题 | | +--------+ | | 表格 | +----+--------+
Facile à mettre en œuvre avec une seule colonne flexible.
<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>
Mais lors de l'ajout du menu, tout ne fonctionne pas correctement, le titre n'est pas tronqué.
<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] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous souhaitez donc que l'élément contenant le titre change de taille avec ses frères et sœurs, mais pas avec ses propres enfants.
La seule façon à laquelle je peux penser est d'envelopper le texte du titre dans un élément approprié - dans ce cas
<span>- 然后使用position: absolute将其从流中取出，并在标题的父元素上使用position: relative. Ensuite, vous devez définir une certaine hauteur pour le titre.Exemple
J'ai remplacé la largeur par
flex: 0 0 200px. Cela empêchera le menu de changer de taille, restant toujours à 200 pixels..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; }<div class="main"> <div class="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>数据</td> <td>数据</td> <td>数据</td> </tr> </table> </div> </div> </div>