Question

这是一个基本的，＆＃34;这个代码中的错误＆＃34;题。我已经写了一些flex，根据我的理解它应该可以工作。

以下是该方案： - .card的右侧有一组.clickBoxes。这些将始终是固定计数和固定高度，因此我可以根据该高度计算弹性基础.top。 - .bottom应始终与.clickBoxes

的最底部对齐

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

考虑到这种假设，Firefox是唯一能够正确执行此操作的浏览器。

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

＆＃13;

        .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;
        }

＆＃13;

    <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>

＆＃13;

Answer 1

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

Flex-grow：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>

Answer 2

这是另一个尝试只能打破铬的答案。再一次基于我对flex的理解，它理论上应该有效，但不是。

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

的答案

Grrr糟糕的Chrome！糟糕！

＆＃13;

        .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;
        }

＆＃13;

<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>

＆＃13;

IE和Chrome中可能的flex布局错误？

2 个答案: