1

Below is my code:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>JS Bin</title>
   <style>
    .container {
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    main {
        flex-grow: 1;
        overflow: auto;
    }

    header {
        height: 10vh;
        background: #ddd;
    }

    footer {
        height: 10vh;
        background: #ddd;
    }
</style>
</head>
<body>
<div class="container">
    <header>header</header>
    <main>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>   <--if increase the height of main, like add more <p>, the height of header narrows, but height of footer does not narrow
    </main>
    <footer>
        footer
    </footer>
</div>

My question is: if the height of main do not over 80vh, the height of main is as expected, Once the height of main over 80vh, the height of main narrows, but height of footer unchanged, Why it this happen？

kukkuz
  • 41,512
  • 6
  • 59
  • 95
Jack
  • 93
  • 1
  • 9
  • the height of both header and footer is narrowing, so what is the question? I am confused – kukkuz Oct 06 '18 at 03:37
  • just the header is narrowing, why did this happen? I write a fixed height which is 10vh – Jack Oct 06 '18 at 03:55
  • both header and footer is narrowing for me in Firefox 62 and Chrome 69.0.3497.100 – kukkuz Oct 06 '18 at 04:32
  • my bad, both are narrowing, but why the height of them narrow? – Jack Oct 06 '18 at 04:49
  • 1
    the shrinking can happen as the `flex-shrink` value is 1 by default and it can shrink (if the flexbox needs to) as much as it can to hold its contents (again since `min-width: auto` is the default) and not beyond that... – kukkuz Oct 06 '18 at 04:56
  • 1
    @kukkuz Thank you very much, I checked shrink property on MDN, `flex-shrink` happens when the total height higher than container, here main(over 80vh) + header(10vh) + footer(10vh) > 100vh, so header and footer shriked by default value. – Jack Oct 06 '18 at 05:13

0 Answers0