3个兄弟姐妹-需要1个响应性增长，而其他2个保持最小内容

Question

我会尽我所能解释约束条件。

有3个容器.content,.left和.bottom和一个调整大小的处理程序来控制可用空间。

• 我需要.container随着空间的增长而"增长"以占用可用空间。
• .left应该保持在它的min-content宽度和100%高度，并且已经(很好)。
• .bottom应该保持在min-content的高度和100%的宽度，不是当前(不太好)。
• 不能改变HTML的结构，因为它不在我的控制范围内。

对align-items: stretch和grow的不同组合进行了一段时间的混乱，但当方向是一行时似乎无法做到这一点，但在不改变HTML结构的情况下无法将其更改为列。

.container {
display: flex;
flex-wrap: wrap;
height: 20rem;
width: 20rem;
overflow: hidden;
resize: both;
border: 1px solid blue;
}
.left {
border: 1px solid red;
}
.content {
border: 1px solid pink;
flex: 1;
}
.bottom {
border: 1px solid grey;
flex-basis: 100%;
}

<div class="container">
<div class="left">left min content</div>
<div class="content">should resize vertically and horizontally</div>
<div class="bottom"/>bottom should be min content</div>
</div>

Answer 1

在这种情况下，我们可以利用display: grid;属性并实现所需的行为，而不改变HTML结构，通过这样做:

.container {
display: grid;
grid-template-columns: max-content auto;
grid-template-rows: auto max-content;
height: 40rem;
width: 20rem;
overflow: hidden;
resize: both;
border: 1px solid blue;
}
.left {
border: 1px solid red;
}
.content {
border: 1px solid pink;
}
.bottom {
border: 1px solid grey;
grid-column: span 2;
}

<div class="container">
<div class="left">left min content</div>
<div class="content">should resize vertically and horizontally</div>
<div class="bottom">bottom should be min content</div>
</div>

我简单地定义了2行和2列，grid-template-columns: max-content auto;和grid-template-rows: auto max-content;。然后让第一列使用max-content占用所有可用的高度，第二列，也就是最下面的一列，保持auto并占用剩余的空间。

然后在底部div上使用grid-column: span 2;，将其扩展到2行的大小，在我们的情况下是宽度的100%(因为我们只有2行)。

我希望这将解决你的问题。