Question

我对flex容器有问题，如果没有足够的垂直空间，则将内容元素包装（列）。包装工作正常，但是容器div不会改变其宽度。

<!DOCTYPE html>
<html><head>
  <style>
    .masterContainer {
        display: inline-flex;
        position: relative;
        margin: 1em;
        height: 3em;
        width:  3em;
        background-color: #000;
    }
    .container {
        display: inline-flex;
        flex-flow: column;
        flex-wrap: wrap;
        position: absolute;
        padding: 10px;
        background: #F66;
        top: 1.5em;
        left: 1em;
        max-height: 90vh;
    }
    .child {
        height: 3em;
        width: 2em;
        margin: 3px;
        padding: 3px;
        background: #22B;
    }
    .child:hover {
        height: 3em;
        width: 4em;
        background: #11E;
    }
  </style></head> <body>
    <div class="masterContainer">
        <div class="container" >
            <div class="child" > &nbsp;</div>
            <div class="child" > &nbsp;</div>
            <div class="child" > &nbsp;</div>
            <div class="child" > &nbsp;</div>
            <div class="child" > &nbsp;</div>
            <div class="child" > &nbsp;</div>
            <div class="child" > &nbsp;</div>
            <div class="child" > &nbsp;</div>
            <div class="child" > &nbsp;</div>
        </div>
    </div>
  </body></html>

要理解我的意思，您需要运行整个页面的摘要并减小窗口的高度，以便蓝色客户端元素开始包装。容器元素（红色）不会更改其宽度。但是，当您甚至将一个包裹的孩子悬停并且孩子长大时（随着悬停改变孩子的大小），父对象的宽度会适应该孩子（但仍然仅适用于单行。父对象不会注意到，现在更多列。

在Windows和Linux下使用Firefox和webkit-browsers测试。所以我想，我只是错过了一些重要的属性。

感谢任何提示。

CSS flex父级不会随包装子项而增长

0 个答案: