0

I need a div to have display: flex, flex-direction: column and flex: 1. But for some reason the content of that div gets resized.

Using display: block does not resize the content.

 body {
      margin: 0;
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    header {
      height: 2em;
      background: blue;
    }

    main {
      background: yellow;
      flex: 1;
      overflow-y: auto;
      /* Why display: flex resizes the articles */
      display: flex;
      flex-direction: column;
      /* If you use display: block its working (uncomment to test)*/
      /* display: block; */
    }

    article {
      height: 15em;
      border: 1px solid black;
      margin: 1em;
    }

    footer {
      background: green;
      height: 3em;
    }
    <body>
      <header></header>
      <main>
        <article></article>
        <article></article>
        <article></article>
      </main>
      <footer></footer>
    </body>

https://codepen.io/anon/pen/YdewKJ

Udhay Titus
  • 5,761
  • 4
  • 23
  • 41
tomole
  • 927
  • 3
  • 12
  • 35
  • 1
    You need to add `flex-shrink: 0;` to your `article` rule. And the reason is that as they doesn't have any content, and the default `flex-shrink` is `1` (allow to shrink), they will shrink-to-fit, down to their content size (which is none at the moment). – Asons Jan 03 '19 at 11:36

1 Answers1

0

Please add below code in your CSS: 

article {
  flex-shrink: 0;
}
Joykal Infotech
  • 1,840
  • 3
  • 9
  • 17