CSS流体布局-文本在区域上展开

我有以下HTML和CSS：

减小窗口大小时，红色框和文本会因换行而在灰色区域上展开

我能做些什么来防止这种情况？我能阻止吗

到目前为止，我所尝试的：

• 使用CSS

  空白：nowrap属性，但似乎
  这不是最好的解决办法

• 只需在红色框下方留出空间，但这对设计影响太大

我想要实现的是：灰盒应该增长，这样红盒就不会在灰盒上膨胀。红色框内的文本不应被截断。

• 您可以为红色框设置

  宽度：180px

• 用于较小屏幕的视口
• 如果你不把盒子放在绝对位置，下面的盒子也会向下浮动

---

您希望发生什么
如果将灰色框设置为相对位置，并将其溢出设置为隐藏，则红色框将被切断

.div1 {
    height: 62%;
    background-color: grey;
    overflow: hidden;
    position: relative;
}

除非为红色框指定设置的宽度，否则缩小窗口将导致其变高并溢出。您可以隐藏它（我的解决方案），让它溢出（当前行为），或者不执行绝对位置，让它使灰色框变大。在你的问题中，你根本不清楚你想要它做什么

---

谢谢您的回复！请注意，我编辑了上面的问题以回答您的问题。如果我删除绝对位置，红色框位于灰色弓的下方，因为有边距。如果我调整边距，灰色框也会改变不需要的位置。如果您给出答案中的

.div1

位置

相对
，并将
#div2
与位置
绝对
保留在一起，您将获得一些需要的行为。如果您不希望红框的宽度或高度增加，而不管它包含的内容是什么，那么您必须指定一个固定的宽度和高度，并指定
溢出：隐藏
到
#box2
@Sven仍然不确定您要实现的目标。。但我更新了另一个演示。看看这是否能让你走上正轨。