TL; DR：具有flex-direction: row所有垂直空间的flex元素，并在其子级中防止滚动条。
第一个小提琴显示了我想要实现的UI类型：这是一个可横向和纵向扩展到整个屏幕的页面。它包含一个标题和一个main <div>，它是项目的可滚动列表。因此，该容器是columnflexbox。请注意，它的宽度和高度都很好。
现在，我想在主要内容中添加一个侧边栏，而flexbox似乎也很完美。我简单地增加一个<div id='main'>具有flex-direction: row：看到第二小提琴。侧栏显示正常，但这是一个问题。新版本<div id='main'>占据了所有垂直空间，因此，项目列表从不获得滚动条。
我试图限制高度<div id='main'>，它似乎起作用。但这在代码方面非常不便，因为标头是一个单独的组件，因此通常它的高度对于主要组件是未知的，我已经在设置之前对其进行了计算height: calc(100vh - ...)。
有没有一种纯粹的CSS方式来告诉Flexbox容器不要垂直增长？还是应该回到良好的旧表html？
我会这样做（在CSS中对我所做的更改发表评论）：
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
#container {
padding: 10px;
background: #fefefe;
display: flex;
flex-direction: column;
max-height: 100vh;
overflow: hidden;
/*remove flex grow and shrink - as parent is not flex, these have no effect*/
}
#header {
padding: 10px;
background: #e1eaec;
}
#items {
flex-grow: 1; /* change the width and height for flex grow */
background: #eee;
padding: 10px;
overflow: auto;
}
.item {
background: lightyellow;
padding: 20px;
}
/* New */
#main {
display: flex;
flex-direction: row;
flex-grow: 1; /* remove flex-shrink and set grow to 1 */
/* height: 300px; */
}
#sidebar {
flex-basis: 20%;
padding: 10px;
}<div id='container'>
<div id='header'>
<h1>Header</h1>
</div>
<div id='main'>
<div id='items'>
<div class='item'>Lorem Ipsum</div>
<div class='item'>Lorem Ipsum</div>
<div class='item'>Lorem Ipsum</div>
<div class='item'>Lorem Ipsum</div>
<div class='item'>Lorem Ipsum</div>
<div class='item'>Lorem Ipsum</div>
<div class='item'>Lorem Ipsum</div>
<div class='item'>Lorem Ipsum</div>
<div class='item'>Lorem Ipsum</div>
<div class='item'>Lorem Ipsum</div>
<div class='item'>Lorem Ipsum</div>
<div class='item'>Lorem Ipsum</div>
</div>
<div id='sidebar'>
Sidebar
</div>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句