Question

TL; DR：带flex-direction: row的flex元素占用所有垂直空间并阻止其子项中的滚动条。

first fiddle显示了我想要实现的用户界面：它是一个横向和纵向延伸到整个屏幕的页面。它包含一个标题和一个主<div>，它是一个可滚动的项目列表。因此容器是column弹性盒。请注意，它的宽度和高度都很好。

现在我想在主要内容中添加一个侧边栏，而flexbox似乎也是完美的。我只需再添加一个<div id='main'> flex-direction: row：请参阅second fiddle。侧边栏显示正常，但这是问题。新的<div id='main'>占用了所有垂直空间，因此，项目列表永远不会获得滚动条。

我试图限制高度<div id='main'>，它似乎有效。但是在代码方面它非常不方便，因为标题是一个单独的组件，所以一般来说它的高度是 unknown 到主要组件，我在设置{{1}之前计算了它}。

是否有纯CSS方式告诉flexbox容器不垂直增长？或者我应该回到好老桌面的HTML？

Answer 1

如果您希望侧边栏具有完整的可用高度，固定标题和可滚动内容，则可以使用下面的代码。

＆＃13;

body {
    margin: 0;
}

section {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  flex: 0 0 auto;
  background: red;
  font-size: 2em;
  padding: .5em;
}

main {
  display: flex;
  flex: 1 1 auto;
}

content {
  flex: 1 1 auto;
  overflow-y: scroll;
}

aside {
  flex: 0 0 auto;
  padding: 20px;
  background: green;
}

div {
  border: 1px solid red;
  padding: 1em;
}

＆＃13;

<section>
  <header>header</header>
  <main>
    <content>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
      <div>div</div>
    </content>
    <aside>sidebar</aside>
  </main>  
</section>

＆＃13;

Answer 2

我会这样做（在css中评论我改变了什么）：

＆＃13;

* {
    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;
}

＆＃13;

<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>

＆＃13;

强制flexbox元素不占用所有垂直空间

2 个答案: