Html 以设置的高度占据尽可能小的宽度的Div

我希望创建一个div，它只占用所需的宽度，高度设置为视口的高度。我遇到的问题是，如果视口高度降低，div的宽度不会更新，并且内容在y轴上溢出

我曾尝试使用flexbox创建两个div，其中一个占据了剩余的空间，但它不会强制另一个div减小宽度，从而使文字不会缠绕

以下是第一个问题场景：

在上图中，有两个div使用以下代码：

.container {
  display: flex;
}
.item-1 {
  flex-grow: 0;
  height: 100vh;
  background-color:yellow;

}
.item-2 {
  flex-grow: 1;
  height: 100vh;
  background-color:red;
}

问题在于，文本没有进行换行以将第一个框的宽度尽可能减小。以下是期望的结果：

第二个问题是，当屏幕高度降低时，内容溢出，而不是加宽div，如下所示：

理想情况下，这是我想要的两个结果：

初始布局

（无溢流，宽度尽可能小）

修改布局

（无溢出，且div宽度已加宽以容纳其中的内容）

---

到目前为止，我尝试过的都没有成功，我是在要求不可能的事情吗？我很感激能提供的任何帮助。

我想在第一段代码的第一个div中添加

flex basis:0%

只是缺少了什么。添加flex basis:0%确实解决了一个问题，内容占用的宽度尽可能小，但当屏幕高度降低时，内容仍然会溢出。