CSS Flexbox动态宽高比代码受内容影响

Question

对于网页网格布局，我决定使用 Flexbox。现在我想实现一些“自动功能”，以便稍后可以插入网格框，而无需在 HTML 中添加类或样式。其中一项功能是使框的高度始终为宽度的 75% - 即使框的大小已调整，例如，浏览器窗口调整大小。当然，如果盒子内容扩展了 75% 的高度，它应该(并且只有这样)增加它的高度以适应内容。我搜索了几个小时来找到合适的解决方案，但我终于让它工作了。所以我至少是这么认为的，直到我将内容添加到框中。

只要框为空，自动纵横比就可以正常工作。如果我添加内容，宽度的 75% 总是通过其内容的扩展添加到它的高度。我做了一个 jsfiddle 来清楚地可视化问题:

JSFiddle wd5s9vq0 ，可视化以下代码:

HTML 代码:

<div class="container">
    <div class="content-cell"></div>
    <div class="content-cell"></div>
</div>

<div class="container">
    <div class="content-cell">
        This cell has an inreased height because of
        it's content. The empty space below the
        content is the 75% of the cells width.
    </div>
    <div class="content-cell"></div>
</div>

CSS:

.container {
    display: flex;
    width: 400px;
}

.content-cell {
    flex: 1 1 0;
    margin: 10px;

    background-color: #ccc;
}

.content-cell::after {
    content: "";

    display: block;
    padding-top: 75%;
}

如果我不知道的话，它看起来像是一个 float 问题 - 但我认为 ::before/::after 选择器应该添加 block - 在使用它的元素之前而不是在元素内部的元素。

有没有人知道如何解决这个问题？

Answer 1

这似乎是 Internet 上一个非常普遍的问题，您找到的大多数解决方案都是关于包装内容、绝对定位内容或两者兼而有之。这有许多和案例相关的缺点。研究代码数小时后，我终于找到了 CSS 属性的组合，无需添加任何 DOM 或使内容绝对定位即可工作。这看起来很简单，我想知道为什么我花了这么长时间，为什么你在网上找不到它。

HTML:

<div class="mybox aspect-full">
    This is text, that would normally extend the box downwards.
    It is long, but not so long that it extends the intended aspect-ratio.
</div>

CSS:

.mybox {
    width: 200px;
}

.aspect-full::before {
    content: '';

    display: block;
    padding-top: 100%;
    float: left;
}

我能发现的唯一缺点是您的单元格内容必须 float 。如果您对其中一个子对象使用 clear，它位于扩展 block 下方，您又回到了最初的问题。如果您需要清除这些纵横比单元格内的 div float ，您可以考虑将它们包装起来并保持包装器可 float 。