getComputedStyle을 사용하여 flexbox의 정확한 폭을 얻는 방법은 무엇입니까?

콘텐츠를 렌더링 한 후 flexbox의 정확한 너비를 얻는 데 문제가 있습니다. Windows 8 응용 프로그램 (평균 ie10 의미)에서 작업하고 있습니다. 여기 getComputedStyle을 사용하여 flexbox의 정확한 폭을 얻는 방법은 무엇입니까?

코드입니다 :
[HTML]

<html> 
<head> 
    <title>flexbox test</title> 
</head> 
<body> 
    <div class='container'> 
     <div class='viewport'> 
      <div class='canvas'> 
       <div class="item"> A </div> 
       <div class="item"> B </div> 
       <div class="item"> C </div> 
       <div class="item"> D </div> 
       <div class="item"> E </div> 
       <div class="item"> F </div> 
       <div class="item"> G </div> 
       <div class="item"> H </div> 
       <div class="item"> I </div> 
       <div class="item"> J </div> 
      </div> 
     </div> 
    </div> 
    <hr style="width: 600px; text-align: left;"> 
    <div class="outbox"></div> 
    <script>tester();</script> 
</body> 
</html>

[CSS]

.container { 
    width: 400px; 
    height: 200px; 
    border: 1px solid black; 
} 

.container .viewport { 
    width: inherit; 
    height: inherit; 
    position: absolute; 
    overflow: auto; 
} 

.container .viewport .canvas{ 
    display: -ms-flexbox; 
    -ms-flex: 0 0 auto; 
    -ms-flex-pack: start; 
    -ms-flex-flow: row none; 
    -ms-flex-align: start; 
    -ms-flex-item-align: start; 
    -ms-flex-line-pack: start; 
    position: relative; 
} 

.container .viewport .canvas .item { 
    width: 100px; height: 100px;color: #fff; 
    background-color: black; 
    margin: 10px; 
}

[JAVASCRIPT]

(function tester(){ 
    var canvas = document.querySelector('.canvas'); 
    var style = document.defaultView.getComputedStyle(canvas, null); 
    function addToOutbox(str){ 
     var outbox = document.querySelector('.outbox'); 
     outbox.innerText = 'Width: ' + str; 
    } 
    addToOutbox(style.width); 
})();

나는대로 다른 뭔가를 할 폭을 기다리고 있었다 스크롤 바가 있습니다. 외부 컨테이너 너비는 400px이고 가운데 하나는 width이고 height은 overflow: auto이고 내부는 확장 가능합니다. 너비와 높이가 각각 100px 인 flexbox에 8 개의 항목이 있습니다. 그래서 flexbox 너비 abot 900px (i.e. 100px*8 + margin-left and margin-right for each item) 기대했지만 여전히 400px 부모 치수 만 받고. 내가 놓친 게 있니? http://jsfiddle.net/pdMSR/ [IE10 열기 만]

출처

2012-09-26 mj.scintilla

요소는 실제로 400 픽셀이다 : 여기

JS는 바이올린의 링크이다. 400px를 넘은 플렉스 아이템은 실제로 넘치고 있습니다.

정말 당신이 얻으려고하는 소리는 scrollWidth입니다. addToOutbox 함수에 canvas.scrollWidth을 전달하면 원하는 것을 얻을 수 있습니다.

출처

2012-09-26 17:41:52

위대한, 수수께끼 해결 :) –

getComputedStyle을 사용하여 flexbox의 정확한 폭을 얻는 방법은 무엇입니까?

답변

관련 문제