绝对定位：Chrome 53 中的新 Flexbox 行为答案

【问题标题】：Absolute positionning: New Flexbox behavior in Chrome 53绝对定位：Chrome 53 中的新 Flexbox 行为
【发布时间】：2017-01-09 11:19:17
【问题描述】：

我注意到 Firefox 和 Chrome（从 V53 开始）在 flex 容器中具有绝对定位的区别

Chrome 53 就像我们在元素上使用 left: 0; 一样。相反，该元素应位于前面的元素之后。

body { background-color: #252525; color: #eee; }

.container { width: 100%; display: flex; flex-flow: row nowrap; background-color: grey; }

.static-content,
.absolute-content { display: flex; }

.static-content { flex: 0 0 auto; }
.absolute-content { flex: 1; background-color: tomato; position: absolute; }

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1>Test</h1>
    
    <div class="container">

      <div class="static-content">
        Hello world!
      </div>

      <div class="absolute-content">
        Yo!
      </div>

    </div>
    
  </body>

</html>

如何在新版 Chrome 中保持 Firefox 的行为？

谢谢！

【问题讨论】：

相关？ - stackoverflow.com/questions/32991051/…
如果这对您来说是个问题，请使用额外的容器

标签： html css google-chrome flexbox

【解决方案1】：

它适用于额外的容器。

body { background-color: #252525; color: #eee; }

.container { width: 100%; display: flex; flex-flow: row nowrap; background-color: grey; }

.static-content,
.extra-container,
.absolute-content { display: flex; }

.static-content { flex: 0 0 auto; }
.absolute-content { flex: 1; background-color: tomato; position: absolute; }

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1>Test</h1>
    
    <div class="container">

      <div class="static-content">
        Hello world!
      </div>

      <div class="extra-container">
        <div class="absolute-content">
          Yo!
        </div>
      </div>

    </div>
    
  </body>

</html>

【讨论】：