Html CSS：填充较低元素的剩余宽度空间 一个听起来很基本的问题，我找不到答案。

使元素拉伸以使用页面的剩余宽度并不是什么新鲜事。与将并排元素堆叠在小屏幕上的情况相同。这两种情况都允许您选择元素顺序/组合（例如，float:direction；DOM元素顺序用于top/bottom），但在这两种情况下，您如何设置顺序？我想你可以说我想控制我的元素堆栈溢出。眨眼眨眼微移

“块格式上下文”技巧让我非常接近我想要的内容。
html:

在我的例子中，当“红色”（动态大小的框）达到阈值（最小宽度）时，如何使其位于顶部？我不能使用媒体查询，因为导航列表项可能会更改。

好了，现在开始

虽然我不确定您想要完成什么，并且此解决方案可能不适合您的布局需要，但这里有一个解决方案-切换两个元素的位置并添加此css：

html, body {
  padding:0;
  margin:0;
}
.red {
  position:relative;
  margin-left:300px;
  height:150px;
  background:red;
}

.blue {
  position:absolute;
  left:0;
  top:0;
  height: 150px;
  width: 300px;
  background: blue;
}
@media (max-width:300px) {
  .blue {
    position:static;
    width:100%;
  }
  .red {
    margin-left:0;
  }
}

我使用了一个媒体查询断点来包装这两个元素

---

在包装时，将元素放在其他元素之上的唯一方法是将其放在HTML标记中的第一位。

这在视觉上实现了我的目标（当我将最大宽度设置为400px时，“红色”会在压碎之前移动），但我不能保证蓝色的宽度。这可能是我得到的最接近的答案，所以谢谢。如果这是你想要的，请选择我的答案作为正确的答案。单击答案左侧投票下方的勾号。

.red {    
width:auto;
height:150px;
background:red;
min-width:200px;
overflow:hidden;
}
.blue {
height:150px;
width:300px;
background:blue;
float:left;
}

html, body {
  padding:0;
  margin:0;
}
.red {
  position:relative;
  margin-left:300px;
  height:150px;
  background:red;
}

.blue {
  position:absolute;
  left:0;
  top:0;
  height: 150px;
  width: 300px;
  background: blue;
}
@media (max-width:300px) {
  .blue {
    position:static;
    width:100%;
  }
  .red {
    margin-left:0;
  }
}