フレキシブルサイズのフレックスアイテムを子供のオーバーフロー時にサイズを維持する

Question

これは本当にイライラしています。

Basicly、私は100％の高さに滞在し、それが単一ページのウェブサイトであるとして、高さに成長しないように私のページを必要としています。

私は脇にリストを持っていると私はそれは私が（私が反応に適用されたカスタムスクロールバーを持っている）オーバーフローが非表示にする必要がある場合、リストのサイズが大きくなり、リストにコンテンツを追加するたびに。

リストはflex: 1;の高さを持っている場合いずれにせよ、成長している（変なふうには）のみoccures。固定された高さを追加すると、すべてが問題ありません。ここで

は（何の固定の高さが適用されていないときにも、このようにする必要があります）、それは一定の高さで動作する方法です：

私は赤いボックスの固定の高さを取り除く

（リスト）それが成長すること自体やページ全体が発生します。

アクションでそれを参照してください。

相続ペンは自分のために確認してください：私が知っているhttps://codepen.io/anon/pen/zPJdoK

は、いくつかのunnecassaryマークアップをtheresのが、私はそれはそれは私が働いている実際のWebページを表していることを確認する必要がありました。

今のように少し混乱し、任意のより詳細なイムをそれを説明することができないため申し訳ありません...

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>