flex:1 is not stretching container with content in Chrome

Question

Clarify: This does not duplicate the question on Chrome / Safari not filling 100% height of flex parent

My question is related to container not stretching with content. Otherwise the container stretches just fine without content. The problem is when I actually start to pour content into the container to increase its height.

The "main" element should be stretching with content but it's currently not doing so. My code is below:

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
header, footer {
    height: 40px;
    background: #fafafa;
    display: block;
}
#page-wrapper {
    display: flex;
    flex-direction: column;
    background: lightpink;
    min-height: 100%;
}
main {
    display: flex;
    background: darkred;
    flex: 1;
    flex-direction: row;
}
#reader {
    flex: 1;
    background: orange;
}
#splitcontent {
    background: lightblue;
    width: 200px;
}

<div id="page-wrapper">
    <header>header</header>
    <main id="content">
        <article id="reader">
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </article>
        <article id="splitcontent">
        </article>
    </main>
    <footer>footer</footer>
</div>

Check 2:nd sample in dupe link, it does exactly what you ask for — Asons, Jan 12 '17 at 19:05
cringing my teeth here... I think I will stay away from flexbox till most browsers come to some sort of agreement. Its still a bit "experimental" for me. Flexbox should be simple - logically speaking my code should be working. — webkitfanz, Jan 12 '17 at 19:55

score 0 · Answer 1 · edited Jan 12 '17 at 14:36

0

Add:

#page-wrapper {
    height:auto;
    min-height: 100%;
}

html,
body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}
header,
footer {
  height: 40px;
  background: #fafafa;
  display: block;
}
#page-wrapper {
  display: flex;
  flex-direction: column;
  background: lightpink;
  height: auto;
  min-height: 100%;
}
main {
  display: flex;
  background: darkred;
  flex: 1;
  flex-direction: row;
}
#reader {
  flex: 1;
  background: orange;
}
#splitcontent {
  background: lightblue;
  width: 200px;
}

<html>

<head>
</head>

<body>
  <div id="page-wrapper">
    <header>header</header>
    <main id="content">
      <article id="reader">
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
        <p>test
        </p>
      </article>
      <article id="splitcontent">
      </article>
    </main>
    <footer>footer</footer>
  </div>
</body>

</html>

edited Jan 12 '17 at 14:36

TylerH

20,799
66
75
101

answered Jan 12 '17 at 14:21

Andrei Fedorov

3,689
2
13
25

I thought about that too but then the #page-wrapper will not stretch to 100% height if there is no content. – webkitfanz Jan 12 '17 at 14:23
ok. i change my answer – Andrei Fedorov Jan 12 '17 at 14:24
that didn't help either, also reversed the auto with min-height: auto, still didn't help. – webkitfanz Jan 12 '17 at 14:28
i dont know. is a worked. see my snipet – Andrei Fedorov Jan 12 '17 at 14:35
It works on the example here but when I run the code in the actual site it does not work. – webkitfanz Jan 12 '17 at 14:41
http://myorange.ca/webkitfanz/test.html – webkitfanz Jan 12 '17 at 14:41

Johannes · Answer 2 · 2017-01-12T15:44:28.233

ANOTHER CHANGE / EDIT:

Change height 100% to min-height: 100% in page-wrapper (height 100% prevents the height from growing), and remove flex: 1 from main

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
header, footer {
    height: 40px;
    background: #fafafa;
    display: block;
}
#page-wrapper {
    display: flex;
    flex-direction: column;
    background: lightpink;
    min-height: 100%;
}
main {
    display: flex;
    background: darkred;
    flex-direction: row;
}
#reader {
    flex: 1;
    background: orange;
}
#splitcontent {
    background: lightblue;
    width: 200px;
}

<div id="page-wrapper">
    <header>header</header>
    <main id="content">
      <article id="reader">
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
      </article>
      <article id="splitcontent">
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
      </article>
    </main>
    <footer>footer</footer>
</div>

Works in Chrome.

It works on codepen for some reason but when I test this on the actual page it does not run as it should: http://myorange.ca/webkitfanz/test.html — webkitfanz, Jan 12 '17 at 14:40
No, that won't be a solution. If I do that then I lose the #splitcontent — webkitfanz, Jan 12 '17 at 15:06
When you remove the content the #page-wrapper does not stretch to 100% content, which it should be doing. — webkitfanz, Jan 12 '17 at 16:23
because you need to add `height: 100%` to the parent elements all the way up to `body` and `html`.So `html, body { height: 100%; }` — Johannes, Jan 12 '17 at 16:29
How else can I get 100% of full page height of #page-wrapper? Its impossible if I don't add 100% height to body and html... — webkitfanz, Jan 12 '17 at 16:52
@Johannes I don't understand the problem using viewport units, like `vh`, since it has better browser support than `flexbox` — Asons, Jan 12 '17 at 19:07
@LGSon You are right - I hadn't thought about that. When I write about something like `vh`, I usually add a remark about browser support, but in this case it's superfluous since flexbox is used anyway... — Johannes, Jan 12 '17 at 20:20

flex:1 is not stretching container with content in Chrome

2 Answers2