如何使用CSS使容器浮动在右侧，并优先考虑垂直高度

Question

我正试图在CSS中创建以下设置，但没有成功：https://gyazo.com/42e85e7bd7823839bf738eece8c3e588

我基本上想要一个最大高度为300px的容器，然后让这个红色框为空白，并在这个300px容器右侧的蓝色框中浮动一些元数据。不过，我的目标是让蓝色容器占据所有的垂直空间，然后在需要更多空间时水平扩展。如果容器中的内容非常少，那么它将具有较低的宽度，但如果可能的话，仍然使用所有300px的高度。如果有更多的内容(例如，在屏幕截图的第三个示例中(，则它会水平扩展，直到需要为止。

所以按顺序它应该：

1. 尝试使用所有可用的垂直空间将内容推到蓝色框中(假设您从1px的宽度开始(
2. 在垂直方向上内容空间不足时，扩展蓝色区域的水平宽度(例如，使用所有1px宽度，因此扩展到2px、3px、4px……直到有足够的空间显示内容为止(。同时，垂直空间仍然总是300px

我目前拥有的是：

.container {
display: flex;
flex-direction: row;
width: 100%;
height: 300px;
margin: 0;
}
.box1 {
background-color: red;
flex-grow: 1;
min-height: 100px;
width: 100%;
}
.box2 {
background-color: blue;
min-width: 100px;
min-height: 100px;
flex-shrink: 5;
}

<div class="container">
<div class="box1">

</div>
<div class="box2">
<div class="fakeBox">
<h1>
Garbage
</h1>
<p>
I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS I hate CSS 
</p>
<button>
Example Button
</button>
</div>
</div>
</div>

但是正如你所看到的，它溢出并且没有按照需要扩展蓝色部分。

有经验的人能为我指明正确的方向吗？

谢谢。

Answer 1

只需设置蓝色方框的高度。不需要做任何其他事情。还是我误会你了？

.container {
display: flex;
flex-direction: row;
width: 100%;
height: 300px;
margin: 0;
}
.box1 {
background-color: red;
flex-grow: 1;
min-height: 100px;
width: 100%;
}
.box2 {
background-color: blue;
height: 300px;
}

<div class="container">
<div class="box1">

</div>
<div class="box2">
<div class="fakeBox">
<h1>
Garbage
</h1>
<p>
I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS I love CSS 
</p>
<button>
Example Button
</button>
</div>
</div>
</div>