chrome中的flex-basis auto [重复]答案

【问题标题】：flex-basis auto in chrome [duplicate]chrome中的flex-basis auto [重复]
【发布时间】：2019-06-18 16:57:40
【问题描述】：

我很难让 Chrome 和 IE11 以相同的方式显示 flex 设置。为了使页脚在 IE 中按预期运行，我需要使用 flex-basis: auto 这反过来又破坏了 .middle 中的 justify-content: center 规则 Chrome 中的类。无论哪种方式，Firefox 都能按预期工作。

为什么 Chrome 中的 flex-basis: auto 的行为与 Firefox 和 IE 不同，如本笔所示：https://codepen.io/ninja59/pen/GzpOjO

在 Chrome 中，通过删除 .content 类中的 auto 可以实现所需的结果，但这会导致页脚在 IE 中呈现页面时始终精确为 100vh。对于长页面，当页面溢出时，.content div 中的内容会与页脚重叠。

总而言之：
仅 IE 需要 flex-basis: auto 以使页脚按预期工作，
仅在 Chrome 中自动设置中断是合理的-内容：中心；

html,
body {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: inherit;
  overflow: auto;
}

.content {
  flex: 1 0 auto;
}

.contentwrapper {
  height: 100%;
  text-align: center;
}

.middle {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner {
  width: 320px;
  background-color: red;
  line-height: 100px;
}

footer {
  padding: 1rem;
  background-color: gray;
  text-align: center;
  flex-shrink: 0;
}

<div class="container">
  <div class="content">

    <div class="contentwrapper">
      <div class="middle">
        <div class="inner">
          box
        </div>
      </div>
    </div>

    <footer>
      footer
    </footer>

  </div>
</div>

【问题讨论】：

flex-basis: auto 在这种情况下等同于 height: auto，这是 Chrome 中百分比高度的无效父引用。换句话说，.contentwrapper 和 height: 100% 需要在父级 (.content) 上定义 height，而 auto 是不够的。有关更完整的说明，请参阅副本。我还发布了另一个副本，可以帮助您更有效地实现布局。

标签： css google-chrome internet-explorer flexbox

【解决方案1】：

我认为这个 codepen 会帮助你。

Example of the FlexBox

你必须改变一些类。

html,
body {
  height: 100%;
  margin: 0px;
}

.container {  
  height: 100%;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contentwrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

.middle {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.inner {
  width: 320px;
  background-color: red;
  line-height: 100px;
}

footer {
  padding: 1rem;
  background-color: gray;
  text-align: center;
  flex-shrink: 0;
}

Also this very good to understand flexbox

【讨论】：