IE 和 Chrome 中可能存在的 flex 布局错误？答案

【问题标题】：Possible flex layout bugs in IE and Chrome?IE 和 Chrome 中可能存在的 flex 布局错误？
【发布时间】：2017-03-16 04:22:19
【问题描述】：

这是一个基本的“这段代码有什么问题”的问题。我已经写了一些 flex 并且根据我的理解它应该可以工作。

这是场景： - 在.card 的右手边有一组.clickBoxes。这些将始终是固定计数和固定高度，因此我可以根据该高度计算 flex-basis .top。 - .bottom 应始终与.clickBoxes 的最底部对齐

我认为应该发生的是 .top 的 flex: 1 0 100px 应该允许它根据其内容增长，但不会缩小到 100px 以下。

鉴于此假设，Firefox 是唯一能正确执行此操作的浏览器。

我知道我可以转移到表格类型的布局（并且可能只是为了解决这个问题），但我只是好奇我对 flex 应该如何工作的解释是否有什么问题。

        .card {
            background-color: green;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            margin: 20px 0px;
        }
        
        .card>.content {
            flex: 1 1 auto;
            background-color: blue;
            width: 300px;
            color: white;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }
        
        .card>.content>* {
            flex: 0 0 auto;
        }
        
        .card>.content>.top {
            flex: 1 0 100px;
            background-color: blue;
            color: white;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: space-between;
            padding: 10px;
        }
        
        .card>.content>.top>* {
            flex: 0 0 auto;
        }
        
        .card>.content>.bottom {
            flex: 1 1 auto;
            background-color: green;
            color: white;
        }
        
        .card>.clickBoxes {
            flex: 0 0 20px;
            background-color: red;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }
        
        .card>.clickBoxes>* {
            background-color: yellow;
            flex: 0 0 18px;
            margin: 1px;
        }

    <div class="card">
        <div class="content">
            <div class="top">
                <div>There should be 10 lines</div>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
            </div>
            <div class="bottom">
                And this should be under everything
            </div>
        </div>
        <div class="clickBoxes">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="card">
        <div class="content">
            <div class="top">
                <div>This should be at the top</div>
                <div>This should be at the bottom</div>
            </div>
            <div class="bottom">
                And this should be under everything
            </div>
        </div>
        <div class="clickBoxes">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

【问题讨论】：

看起来像 MDN 文档说： flex-basis CSS 属性指定 flex 基础，它是 flex 项目的初始主要大小。此属性确定内容框的大小，除非使用 box-sizing 另有指定。因此，鉴于它是初始大小并且我已经定义了 flex-grow，它应该在内容溢出的情况下调整为更大。我对此研究得越多，它似乎就越像除了 Firefox 之外的所有东西中的一个 CSS 错误。
我已经联系了 IE 团队...有人认识 Chrome 的人吗？

标签： css flexbox

【解决方案1】：

如果您希望 flex 容器适应其内部内容大小，请为 flex-basis 指定 auto。

弹性增长：1；如果容器中有可用的高度，它将使其增长（因此它以另一种方式工作，在层次结构中向上而不是向下查找）

        .card {
            background-color: green;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            margin: 20px 0px;
        }
        
        .card>.content {
            flex: 1 1 auto;
            background-color: blue;
            width: 300px;
            color: white;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }
        
        .card>.content>* {
            flex: 0 0 auto;
        }
        
        .card>.content>.top {
            flex: 1 0 auto; /* changed */
            background-color: blue;
            color: white;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: space-between;
            padding: 10px;
        }
        
        .card>.content>.top>* {
            flex: 0 0 auto;
        }
        
        .card>.content>.bottom {
            flex: 1 1 auto;
            background-color: green;
            color: white;
        }
        
        .card>.clickBoxes {
            flex: 0 0 20px;
            background-color: red;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }
        
        .card>.clickBoxes>* {
            background-color: yellow;
            flex: 0 0 18px;
            margin: 1px;
        }

    <div class="card">
        <div class="content">
            <div class="top">
                <div>There should be 10 lines</div>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
            </div>
            <div class="bottom">
                And this should be under everything
            </div>
        </div>
        <div class="clickBoxes">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="card">
        <div class="content">
            <div class="top">
                <div>This should be at the top</div>
                <div>This should be at the bottom</div>
            </div>
            <div class="bottom">
                And this should be under everything
            </div>
        </div>
        <div class="clickBoxes">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

【讨论】：

但它在 Firefox 中运行良好。此外，在 Chrome 中，如果您将 flex-basis: 100px 组件切换为 auto，则它可以工作。但是当您切换回100px 时，它仍保持扩展大小。你的解释很有道理，但我认为可能还有更多。
所以实际上如果你把它设置为自动它是行不通的。绿色的 div 最高...它的顶部应该与点击框底部对齐。我同意它在所有浏览器中的呈现方式都是相似的，但对于这种出于对齐目的的特定场景，它不起作用。
你的意思是第二种情况？它对我来说工作正常。 card 将其大小设置为其内容的最大大小，在本例中为点击框。现在，内容将其大小调整为卡片。现在，顶部和底部会增长以适应内容。对我来说，没关系...（在这种情况下，flex-grow 有效，因为 content 的 height . 比 top 和 bottom 的总和要高）

【解决方案2】：

这是另一个仅在 chrome 中中断的答案的尝试。再次基于我对 flex 的理解，理论上它应该可以工作，但实际上并没有。

在 .card>.content>.top 中，混合@Michael-b 使用flex: 1 1 auto 并添加min-height:100px; 的答案

Grrrr 糟糕的 Chrome！不好！

        .card {
            background-color: green;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            margin: 20px 0px;
        }
        
        .card>.content {
            flex: 1 1 auto;
            background-color: blue;
            color: white;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }
        
        .card>.content>* {
            flex: 0 0 auto;
        }
        
        .card>.content>.top {
            flex: 1 0 auto;
            min-height: 100px;
            background-color: blue;
            color: white;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: space-between;
            padding: 10px;
        }
        
        .card>.content>.top>* {
            flex: 0 0 auto;
        }
        
        .card>.content>.bottom {
            flex: 1 1 auto;
            background-color: green;
            color: white;
        }
        
        .card>.clickBoxes {
            flex: 0 0 20px;
            background-color: red;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }
        
        .card>.clickBoxes>* {
            background-color: yellow;
            flex: 0 0 18px;
            margin: 1px;
        }

<div class="card">
        <div class="content">
            <div class="top">
                <div>There should be 10 lines</div>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
            </div>
            <div class="bottom">
                And this should be under everything
            </div>
        </div>
        <div class="clickBoxes">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="card">
        <div class="content">
            <div class="top">
                <div>This should be at the top</div>
                <div>This should be at the bottom</div>
            </div>
            <div class="bottom">
                And this should be under everything
            </div>
        </div>
        <div class="clickBoxes">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

【讨论】：