絶対positionning：クローム53

-1

の新フレキシボックスの挙動私たちは要素にleft: 0;を使用しているようなフレックスコンテナ絶対positionning：クローム53

クローム53行為における絶対位置でのFirefoxとChrome（V53）からの違いに気づきました。代わりに、要素は前の要素の後に配置する必要があります。私はクロームの新しいバージョンでは、Firefoxの動作を維持するにはどうすればよい

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>

？

ありがとうございます！

出典

2016-09-01 devoups

関連？ - http://stackoverflow.com/questions/32991051/why-is-an-absolutely-positioned-flex-item-not-being-ignored-by-just-content –

これは問題がある場合は余分なコンテナを使用してください – Huangism

これは余分なコンテナで動作します。

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>

出典

2016-09-01 14:35:15 devoups

絶対positionning：クローム53

答えて

関連する問題