flex:1 不是在 Chrome 中使用内容拉伸容器 [重复]答案

【问题标题】：flex:1 is not stretching container with content in Chrome [duplicate]flex:1 不是在 Chrome 中使用内容拉伸容器 [重复]
【发布时间】：2017-01-12 23:44:28
【问题描述】：

澄清：这不会重复Chrome / Safari not filling 100% height of flex parent上的问题

我的问题与容器不随内容拉伸有关。否则容器在没有内容的情况下伸展得很好。问题是当我真正开始将内容倒入容器以增加其高度时。

“主”元素应该随着内容进行拉伸，但目前还没有这样做。我的代码如下：

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>

【问题讨论】：

在 Firefox 中是可以的。铬是错误的
是的，它也需要在 chrome 中工作......
我在 Firefox 和 Chrome 中的行为是一样的。
Check 2:nd sample in dupe link，它完全符合您的要求
在这里咬牙切齿......我想我会远离 flexbox，直到大多数浏览器达成某种协议。它对我来说仍然有点“实验性”。 Flexbox 应该很简单 - 从逻辑上讲，我的代码应该可以工作。

标签： html css google-chrome flexbox

【解决方案1】：

添加：

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

【讨论】：

我也想过，但是如果没有内容，#page-wrapper 将不会拉伸到 100% 的高度。
好的。我改变我的答案
这也没有帮助，也用 min-height: auto 反转了 auto，仍然没有帮助。
我不知道。是一个工作。看我的片段
它适用于此处的示例，但是当我在实际站点中运行代码时它不起作用。

【解决方案2】：

另一个更改/编辑：

将page-wrapper中的height 100%更改为min-height: 100%（height 100%防止高度增长），并从main中删除flex: 1

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>

在 Chrome 中工作。

【讨论】：

不，那不是问题。我刚刚关闭了
标签。
由于某种原因它可以在 codepen 上运行，但是当我在实际页面上测试它时，它并没有按应有的方式运行：myorange.ca/webkitfanz/test.html
不，这不是解决方案。如果我这样做，那么我会失去#splitcontent
我添加了另一个更改 - 请参阅已编辑的问题
当您删除内容时，#page-wrapper 不会拉伸到 100% 的内容，它应该这样做。