1

渲染内容后，我在获取 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和heightwith overflow: auto，最内层是可扩展的。flexbox 中有八个项目，100px每个项目都有宽度和高度。所以我期待 flexbox 宽度 abot900px (i.e. 100px*8 + margin-left and margin-right for each item)但仍然400px只得到父尺寸。我错过了什么吗？

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

4

1 回答 1

3

该元素实际上是 400px。超过 400px 的弹性项目实际上是溢出的。

听起来您真正想要的是scrollWidth。如果你传入canvas.scrollWidth你的addToOutbox函数，你会得到你正在寻找的东西。

于 2012-09-26T17:41:52.383 回答