Home/ Questions/Q 8581009
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T20:56:53+00:00

I have a problem to get exact width of flexbox after rendering contents. I

  • 0

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]

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0