Absolute positionning: New Flexbox behavior in Chrome 53

Question

I noticed a difference between Firefox and Chrome (from V53) with absolute positioning in a flex container

Chrome 53 act like we are using a left: 0; on the element. Instead, the element should be positioned after the previous elements.

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>

How can i keep the Firefox behavior in the new version of Chrome?

Thanks!

Related? - http://stackoverflow.com/questions/32991051/why-is-an-absolutely-positioned-flex-item-not-being-ignored-by-justify-content — Paulie_D, Sep 01 '16 at 14:14

score 0 · Answer 1 · answered Sep 01 '16 at 14:35

It works with an extra container.

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>

Absolute positionning: New Flexbox behavior in Chrome 53

1 Answers1