时间戳

首页 > 解决方案 > 当其父级具有最小高度时，如何使按钮占用所有可用空间？

html - 当其父级具有最小高度时，如何使按钮占用所有可用空间？

问题描述

我在弹性框中有一个按钮。我想占用尽可能多的空间，但我也希望这个弹性框有一个最小高度，因为在你点击这个按钮后它会被动态文本替换。如果这个动态文本真的很长，我想让 flex 框增加高度，以便所有文本都适合。

这是我尝试过的：https ://codepen.io/tietyt/pen/xxZRYdd

<div class="container">
    <button disabled="" tabindex="0"> Text </button>
</div>

.container {
    display: flex;
    flex-direction: column;
    margin-bottom: 3em;
    width: 100%;
    text-align: center;
    border-style: outset;
    min-height: 5em;
}

.container button {
    align-self: stretch;
}

标签： htmlcss

解决方案

根据您所描述的，我认为您正在寻找

flex: auto;

如果您将该规则添加到您的按钮，那么它应该占用其父容器内的所有可用空间。

根据MDNflex文档：

汽车

该项目根据其宽度和高度属性调整大小，但会增长以吸收弹性容器中的任何额外可用空间，并缩小到最小尺寸以适应容器。这相当于设置“flex: 1 1 auto”。

推荐阅读