플렉스 박스 및 상단/하단 Choice가없는 절대 위치 대 FF 및 IE

Question

Chrome과 Firefox/Safari 간의 flexbox 구현의 차이점을 발견했습니다. 위/아래/왼쪽/오른쪽 세트가없는 위치 절대 요소가있는 경우 Chrome에서 요소는 상단 : 0, 왼쪽 : 0에 스냅되지만 다른 브라우저에서는 상단 및 왼쪽 값이 요소 정적으로 배치되었습니다.

Take a look at the codepen here.

이 상황에 대한 인 flexbox 사양의 권장 사항은 무엇입니까? 버그가있는 동작을 보여주는 브라우저는 무엇입니까?

HTML

<div class="flex"> 
    <div class="offset">Offset</div> 
    <div class="absolute">Absolute</div> 
</div> 

CSS

.flex { 
    display: flex; 
    flex-direction: column; 
    width: 300px; 
    background: #eee; 
    height: 200px; 
    padding: 8px; 
} 
.offset { 
    width: 300px; 
    height: 96px; 
    background: #ccc; 
    margin-bottom: 8px; 
} 
.absolute { 
    position: absolute; 
    background: red; 
    color: white; 
    width: 300px; 
    height: 96px; 
} 

Answer 1

예,이 깜박임과 웹킷 사이 레이아웃의 차이입니다.

현재 권장 사항은 top과 left을 지정하거나 더 나은 동작을 사용하는 것입니다.

Is nesting the div an acceptable alternative for the current issue?

I think Blink (Chrome) is technically correct here.
절대적으로 위치 된 아이들은 플렉스 박스 레이아웃 모델에 참여해서는 안된다.
요소의 시작 항목으로 처리해야합니다.

편집 : Blink와 WebKit을 분리해야하며이 특정 중복 테스트가 필요합니다. test cases을 업데이트해야 할 수 있습니다.