Make flex item with flexible size keep its size when children overflow

Question

This one is really frustrating me and Im not sure if I worded that correctly.

Basicly, I need my page to stay at 100% height and not grow in height as it is a single page website.

I have a list in an aside and whenever I add content to the list it makes the list grow in size when I need the overflow to be hidden (I have a custom scrollbar applied in react).

Anyhow, the growing (weirdly) only occures when the list has the height of flex: 1;. When I add a fixed height, everything is fine.

Here is how it acts with a fixed height (should also be like this when no fixed height is applied):

When I remove the fixed height of the red box (the list) then it causes itself and the whole page to grow:

See it in action:

Heres the pen to see for yourself: https://codepen.io/anon/pen/zPJdoK

I know theres some unnecassary markup but I needed that to be sure that it represents the actual webpage I am working on.

Sorry for not being able to explain it any more detailed, Im a bit confused as of now...

have you tried : overflow:auto ? cause : https://codepen.io/anon/pen/yPxzMX seems close — G-Cyrillus, Nov 27 '17 at 21:28
thats getting closer but the red box has a scrollbar applied to it already which is why the standard scrollbar, especially on the green box is not sufficient — ThatBrianDude, Nov 27 '17 at 21:32
If you could achieve that result with the red box instead of the green one that would already be a huuge step forward — ThatBrianDude, Nov 27 '17 at 21:35
max-height + overflow on the parent / child. you should have guessed it somehow, it is 101 rules ;) https://codepen.io/anon/pen/yPxzMX — G-Cyrillus, Nov 27 '17 at 21:49
I guess I have to revisit the basics, I jumped into CSS using flex-box actually which got me pretty far without ever truly understanding floats and all. I thought flex would render all that obsolete but this is yet another example of how wrong I was. Thank you so much! — ThatBrianDude, Nov 27 '17 at 21:54

score 0 · Answer 1 · answered Nov 27 '17 at 22:09

Are you referring to something like this perhaps? I'm not too sure.

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

Make flex item with flexible size keep its size when children overflow

1 Answers1