CODEWITHSUNDEEP
javascriptmicrosoft-metrointernet-explorer-10flexbox
mj.scintilla
mj.scintilla

Reputation: 638

How to get exact width of flexbox by getComputedStyle?

I have a problem to get exact width of flexbox after rendering contents. I am working on a Windows 8 application (mean ie10 specific).

Here is the code:
[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);
})();

I was expecting width to be something else as there is a scroll bar. Outer container width is 400px, middle one is inheriting width and height with overflow: auto and inner most is expandable. There are eight items in flexbox with width and height 100px each. So I was expecting the flexbox width abot 900px (i.e. 100px*8 + margin-left and margin-right for each item) but still getting 400px only which is parent dimensions. Am I missing something?

Here is the link to JS Fiddle: http://jsfiddle.net/pdMSR/ [Open with ie10 only]

Upvotes: 1

Views: 3096

Answers (1)

Erik Anderson
Erik Anderson

Reputation: 106

The element really is 400px. The flex items that are positioned past 400px are actually overflowing.

It sounds like what you are really trying to get is the scrollWidth. If you pass in canvas.scrollWidth to your addToOutbox function you'll get what you are looking for.

Upvotes: 3

Related Questions