如何通过 getComputedStyle 获取 flexbox 的确切宽度？答案

【问题标题】：How to get exact width of flexbox by getComputedStyle?如何通过 getComputedStyle 获取 flexbox 的确切宽度？
【发布时间】：2012-09-17 18:31:15
【问题描述】：

在渲染内容后，我在获取 flexbox 的确切宽度时遇到了问题。我正在开发一个 Windows 8 应用程序（意思是 ie10 特定的）。

代码如下：
[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，最里面是可扩展的。 flexbox 中有八个项目，每个项目的宽度和高度为100px。所以我期待 flexbox 宽度 abot 900px (i.e. 100px*8 + margin-left and margin-right for each item) 但仍然得到 400px 只是父尺寸。我错过了什么吗？

这里是 JS Fiddle 的链接：http://jsfiddle.net/pdMSR/ [仅使用 ie10 打开]

【问题讨论】：

标签： javascript microsoft-metro internet-explorer-10 flexbox

【解决方案1】：

元素确实是 400px。超过 400px 的 flex 项目实际上已经溢出了。

听起来你真正想要的是滚动宽度。如果你将canvas.scrollWidth 传递给你的addToOutbox 函数，你会得到你想要的。

【讨论】：