플렉스 성장에는 서브 유닛 또는 소수 값으로 브라우저에서 일관성 동작

Question

사파리, 크롬과 파이어 폭스는 다음과 같은 코드에 대해 서로 다른 결과가 있습니다

<div class="container"> 
    <div class="box-1"></div> 
    <div class="box-2"></div> 
</div> 

와 CSS :

.container { 
    display: flex; 
    width: 1000px; 
} 
.box-1 { 
    flex: 0.5 0.5 0; 
} 
.box-2 { 
    flex: 0.3 0.3 0; 
} 

https://codepen.io/andreiduca/pen/ybOwWV

을

두 상자의 flex 기준은 0입니다. 즉 남은 사용 가능한 공간은 1000px입니다.

예상 결과 :이

모든 성장 요인의 합이 너무 남아있는 사용 가능한 공간이 1000px/0.8 = 1250px로 구분됩니다 0.5 + 0.3 = 0.8입니다. 1250px * 0.5 = 625px

.box-2 상자의 전체 폭은 625 + 375 = 1000px입니다 1250px * 0.3 = 375px

얻을 것이다

• .box-1 얻을 것이다 :

  각 상자는 성장한다 팩터에 따라 그 공간의 일부를 얻을 것이다 .container 전체를 채우십시오. 사파리가이 권리를 얻습니다.

  실제 결과는 :

  는 크롬과 파이어 폭스는 1의 최소 비율로 남은 공간을 분할, 결코 0.8 것입니다. 나머지 공간은 1000px/round(0.8) = 1000px입니다. 1000px * 0.5 = 500px

• .box-21000px * 0.3 = 300px

의 전체 폭을 얻을 것이다

• .box-1 얻을 것이다 :

  는 다시, 각 상자는 성장한다 팩터에 따라 그 공간의 일부를 얻을 것이다 상자는 500 + 300 = 800px이고 전체 내용은 .container이 아닙니다. 우리는 배포되지 않은 공간 인 200px을 남겨 둡니다.

  그래서 질문은 : 어떤 브라우저에서 올바르게 표시되는지, 그 이유는 무엇입니까?@LGSon 응답으로 당 100 배 이상의 사양을 읽은 후

Answer 1

: https://www.w3.org/TR/css-flexbox-1/#remaining-free-space

• 에만 여유 공간을 나머지는를 분산이 경우에있는 모든 flex-의 합 때문에 요인이 1보다 작 으면 초기 값의 여유 공간에 요인의 합계를 곱하여 계산됩니다. 각 플렉스 상자에 pr을 곱한 값이 각 플렉스 상자에 나타납니다. 자신의 oportion 모든 플렉스 성장 값

그래서 .box-1 얻을 것이다 800px * 0.5/0.8 = 500px의 총합에 가치를 플렉스는 성장에; 마찬가지로 .box-2은 800px * 0.3/0.8 = 300px입니다. 200px의 나머지는 배포되지 않은 상태로 남습니다.

Safari 10.1에는이 계산이 누락되어 있지만 SafariTP에서는 올바르게 처리합니다.