-1

In the following example I can't understand why I need to hide the overflow on #articles. To me, it seems that because I have article { flex: 1 1 auto; } that it should shrink & grow to the parent #articles height. Help appreciated!

html, body {
    height: 100vh;    
    overflow: hidden;
}
#container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100vh;
    overflow: hidden;
    
    width: 50%;
    background-color: red;
}

#container header {
    background-color: gray;
    flex: 0 0 auto;
}

#articles {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  /* Why is this required? */
  /* overflow: hidden; */
}

article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

article + article {
  background-color: blue;
}
#container footer {
    flex: 0 0 auto;
    background-color: gray;
}
<section id="container" >
    <header id="header" >This is a header</header>
    <section id="articles">
      <article>Short</article>
      <article id="content" >
        This is the content that
        <br />
        With a lot of lines.
        <br />
        With a lot of lines.
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
    </article>
    </section>
    <footer id="footer" >This is a footer</footer>
</section>
ryan
  • 6,541
  • 5
  • 43
  • 68

1 Answers1

0

I'm not sure and this is entirely based in my own experience... but:

I made a codepen to mess around: https://codepen.io/jorgeks/pen/gOgmPgO

#articles-wrapper {
    border: 4px solid pink;
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  /* Why is this required? */
/*   overflow: hidden; */
    /* This also works, or anything in fact */
/*  overflow: auto; */
}

I think the problem is because your blue content is actually bigger than the wrapper with overflow: hidden, so, it doesn't display but still exists. Flex would try to fit in there, but you set an overflow property, so it may ignore the height/width because you say so.

overflow

So, when you set a new overflow property to the blue block you made it fit and the scrolls appears.

There's no context, but, why use all of this overflows and fixed heights? Is not something usual...

Also, check these answers, may help:

Jorge Kunrath
  • 817
  • 7
  • 17
  • There are two overflow definitions that aren't required in this example `html, body` & `#container`. There are no fixed heights defined except on `html, body` & `#container`. If you think something isn't usual, please provide a full alternative css solution that explains why it is better than what I have posted above. – ryan Apr 01 '21 at 17:07
  • I think I will try this tonight. Can you please send a wireframe/briefing of what you want to achieve. As I mentioned, I don't have any context. And yes, two overflows and fixed heights are a lot, is possible to have a very complex page with none of that. But again, the property exists for a reason, your requisites may be one of that. – Jorge Kunrath Apr 01 '21 at 17:12