当孩子们溢出时，使灵活尺寸的弹性项目保持其大小

Question

这个让我感到很沮丧，我不确定我是否说得对。

基本上，我需要我的页面保持100％的高度而不会增加高度，因为它是单页网站。

我在旁边有一个列表，每当我向列表中添加内容时，当我需要隐藏溢出时，它会使列表的大小增加（我在响应中应用了自定义滚动条）。

无论如何，只有当列表的高度为flex: 1;时才会出现增长（奇怪）。当我添加一个固定的高度，一切都很好。

以下是它如何以固定高度作用（当没有应用固定高度时也应如此）：

当我删除红色框（列表）的固定高度时，它会导致自身和整个页面增长：

看到它的实际效果：

继续看笔：https://codepen.io/anon/pen/zPJdoK

我知道有些不必要的标记，但我需要确保它代表我正在处理的实际网页。

很抱歉没有能够更详细地解释它，我现在有点困惑......

Answer 1

你指的是这样的事吗？我不太确定。

.container{
    background: black;
    width: 1000px;
    height: 300px;
    display: grid;
    grid-template-columns: 180px 1fr 180px;
    grid-template-rows: 1fr;    
    grid-template-areas: "nav main aside";
}

nav {
  grid-area: nav;
  background: blue;
}

main {
  grid-area: main;
  background: black;
  display: flex;
  flex-direction: column;
}

aside {
  grid-area: aside;
  background: green;
  display: flex;
  flex-direction: column;
}

aside > header, aside > footer{
  height: 60px;
  background: yellow;
}

aside > main {
  flex: 3;
  background: green;
}

aside > main > .content {
  background: red;
  margin: 10px;  
  max-height: 200px;
  overflow-y:scroll;
}

.space_taker{
  margin: 10px;

  height: 30px;
  background: white;
}

<div class="container">
  <nav></nav>
  <main></main>
  <aside>
    <header>
    </header>
    <main> 
      <div class="content"> 
        <div class="space_taker">asdafasdfasdf</div> 
        <div class="space_taker">asdfasdf</div>
        <div class="space_taker">asdfs</div>
        <div class="space_taker">dfgdgf</div>
        <div class="space_taker">asdasd</div>
        <div class="space_taker">asdasd</div>
        <div class="space_taker">asdfs</div>
        <div class="space_taker">dfgdgf</div>
        <div class="space_taker">asdasd</div>
        <div class="space_taker">asdasd</div>
        <div class="space_taker">asdfs</div>
        <div class="space_taker">dfgdgf</div>
        <div class="space_taker">asdasd</div>
        <div class="space_taker">asdasd</div>
      </div>
    </main>
    <footer>
    </footer>
  </aside>
</div>