使用 (flexlayout) 列时，div 的大小不正确

Question

我有 4 个 li's 和一个 div 具有背景图像（通过 CSS）。我使用flexbox 进行布局。我希望它在每列中有 3 个 li's 列。除了包含图像的div 之外，一切都运行良好。 div 的高度大于其父级。

奇怪的是，当我把它变成rows而不是columns时，它的高度是正确的。

（如果您显示的尺寸正确，请尝试使窗口宽度变宽。）

如何使div 具有正确的大小？

JSFiddle

$(document).ready(function () {
    "use strict";

    function resizeHeightLi() {
        $('li').css('height', 'calc(' + $('li').width() + 'px / 1.8)');
    }

    resizeHeightLi();

    $(window).resize(function () {
        resizeHeightLi();
    });

});

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;
    flex-basis: 70%;
    height: 80%;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    /*flex-direction: row; // When it's set to row, it works fine.*/
    flex-direction: column;
}
li {
    
    flex-basis: calc(100% / 3 - 2px); /* Subtract the border */
    color: firebrick;
    list-style-type: none;
    
    border: 1px solid firebrick;
}
.image {
    background-image: url("http://i.imgur.com/nswXRR4.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <ul>
        <li><div class="image"><span>1</span></li>
        <li><div class="image"><span>2</span></li>
        <li><div class="image"><span>3</span></li>
        <li><div class="image"><span>4</span></li>
    </ul>
</div>

Answer 1

由于每个li 的高度由CSS 中的flex-basis 规则处理，我认为没有必要再用JavaScript 分配高度。相反，您可以在完成 flex 计算后获取每个 li 的高度，并将其分配给您的图像 div。这样，父元素和子元素的高度相同。

function resizeHeightLi() {
    $('.image').css('height', $('li').height() + 'px');
}

编辑（仅限 CSS）

要完全使用 CSS 完成相同的操作，您可以删除您现在拥有的所有 JS 并将以下内容添加到您的 CSS：

// In addition to what you already have in your li
li {
  // ...
  position: relative;
}

// Same here, in addition to what you have in .image
.image {
   // ...
   position: absolute;
   width: 100%;
   height: 100%;
}