当我设置百分比时，Div 的高度变为 0

Question

我有li's 和flexlayout。每列有 3 个li's。 （flex-basis 设置为第三个。）在li 中，我有一个div 用于背景图像，另一个div 用于显示文本。我希望文本位于图像下方。图片应该占据房间的大部分。

由于某种原因，image 不存在。我将image 高度设置为80%，但是当我运行它并转到“检查元素”（在 chrome 中）时，div's 高度为 0。当我将其设置为像素数量时，（不是百分比)，然后它就可以工作了。

我的问题是，如何将div 设置为百分比并仍然显示？

JSFiddle

html, body {
    margin: 0;
    height: 100%;
}
div {
    align-items: center;
    justify-content: center;
    height: 100%;
    display: flex;
    overflow: auto;
    background-color:aqua;
}
ul {
    margin-top: auto;
    margin-bottom: auto;
    height: calc(70% + 0px);
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    align-content: flex-start;
}
li {
    flex-basis: calc(100% / 3 - 2px);
    /* Subtract the border */
    color: firebrick;
    border: 1px solid firebrick;
    background-color: greenYellow;
    margin: 0px;
    list-style-type: none;
    box-sizing: border-box;
    background-size: contain;
    width: 200px;
}
.image {
    background-image: url("http://i.imgur.com/nswXRR4.jpg");
    background-size: contain;
    background-position: 50%, 50%;
    background-repeat: no-repeat;
    margin: 5px;
    height: 90%;
}

<div>
    <ul>
        <li>
            <div class="image"></div>
            <div class="num">1</div>
        </li>
        <li>
            <div class="image"></div>
            <div class="num">2</div>
        </li>
        <li>
            <div class="image"></div>
            <div class="num">3</div>
        </li>
        <li>
            <div class="image"></div>
            <div class="num">4</div>
        </li>
    </ul>
</div>

Answer 1

虽然li 的高度由flex-basis: calc(100% / 3 - 2px); 定义，但在处理百分比时，浏览器通常将spec 解释为由height 属性定义的高度。

根据我的经验，min-height、max-height 和 flex-basis 在 dealing with percentage heights 时从未用作父元素的高度。只有height 有效，即使它没有明确说明这必须是规范中的方式。 （更新：Firefox may be broadening its interpretation.）

您可以进行此调整：

代替：flex-basis: calc(100% / 3 - 2px);

使用：height: calc(100%/3 - 2px);

但是...

根据你写的：

在li 中，我有一个div 用于背景图像，另一个div 用于 显示文字。我希望文本位于图像下方。图像应该 占据了大部分房间。

...这不一定是关于百分比高度的问题。您可以将flex-basis 保留在li 上，使li 成为弹性容器，然后将弹性属性应用于图像和文本。

对li进行此项调整：

li {
    flex-basis: calc(100% / 3 - 2px);
    /* Subtract the border */
    color: firebrick;
    border: 1px solid firebrick;
    background-color: greenYellow;
    margin: 0px;
    list-style-type: none;
    box-sizing: border-box;
    background-size: contain;
    width: 200px;

    display: flex; /* new */
    flex-direction: column; /* new */
}

然后调整图片和文字：

.image {
    background-image: url("http://i.imgur.com/nswXRR4.jpg");
    background-size: contain;
    background-position: 50%, 50%;
    background-repeat: no-repeat;
    margin: 5px;
    /* height: 90%; remove */
    flex: 10 1 auto; /* new */
}

.num {
    flex: 1 1 auto;
}

DEMO

注意：flex: 10 1 auto; 表示 flex-grow: 10、flex-shrink: 1、flex-basis: auto。换句话说，flex item 可以比 flex-grow: 1 的兄弟姐妹多消耗 10 倍的可用空间，与 flex-shrink: 1 的兄弟姐妹按比例均匀缩小，并且其初始主要大小基于内容大小。

Answer 2

您的li 没有定义的height 属性。然后您的.image div 正试图成为未定义的90%。你可以猜到是什么：0。

根据您的需要，您可以将您的li 设置为display:flex，然后让您的.image div 比您的.num div 增长更多，如下所示。

还有更多方法可以修改flex: 10 1 0 或flex: 1 0 0 属性，以获得您正在寻找的内容，但以下代码是一个示例：

html, body {
    margin: 0;
    height: 100%;
}
div {
    align-items: center;
    justify-content: center;
    height: 100%;
    display: flex;
    overflow: auto;
    background-color:aqua;
}
ul {
    margin-top: auto;
    margin-bottom: auto;
    height: calc(70% + 0px);
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    align-content: flex-start;
}
li {
    flex-basis: calc(100% / 3 - 2px);
    /* Subtract the border */
    color: firebrick;
    border: 1px solid firebrick;
    background-color: greenYellow;
    margin: 0px;
    list-style-type: none;
    box-sizing: border-box;
    background-size: contain;
    width: 200px;
    display:flex;
  flex-direction:column;
}

.image {
     flex: 10 1 0; 
 }

.num {
  flex: 1 0 0;
}

.image {
    background-image: url("http://i.imgur.com/nswXRR4.jpg");
    background-size: contain;
    background-position: 50%, 50%;
    background-repeat: no-repeat;
    margin: 5px;
    height: 90%;
}

<div>
    <ul>
        <li>
            <div class="image"></div>
            <div class="num">1</div>
        </li>
        <li>
            <div class="image"></div>
            <div class="num">2</div>
        </li>
        <li>
            <div class="image"></div>
            <div class="num">3</div>
        </li>
        <li>
            <div class="image"></div>
            <div class="num">4</div>
        </li>
    </ul>
</div>