Question

我注意到Firefox和Chrome（来自V53）与Flex容器中的绝对定位之间存在差异

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

＆＃13;

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; }

＆＃13;

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

＆＃13;

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

谢谢！

Answer 1

它适用于额外的容器。

＆＃13;

var2

＆＃13;

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; }

＆＃13;

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

1 个答案: