Css 两个内联块元素始终位于同一行上

我总是想在一行中显示两个元素。第一个元素的可用宽度为100%，最大为350px，第二个元素的可用宽度为150px

当父元素（或浏览器）的宽度减小时，我希望第一个元素的宽度减小，以调整同一行中的两个元素，但第二个元素移动到下一行

下面是一个示例代码：

span{
高度：30px；
显示：内联块；
}
.span1{
背景：红色；
最大宽度：350px；
宽度：100%；
}
.span2{
背景：蓝色；
宽度：150px；
}

---

Hm好的，下面是一个示例：

span {
  height: 30px;
  display: inline-block;
  margin-right: -.25em;
}
.span1 {
  background: red;
  width: 350px;
  max-width: calc(100% - 150px);
}
.span2 {
  background: blue;
  width: 150px;
}

我不确定我是否理解你的意思。这是一把小提琴：

再见

---

Ralf

您尝试过任何方法吗，比如媒体查询？是的，但这会针对特定的视口大小。一般来说，我想这样做（因为这只是一个示例，实际情况非常复杂）：）您的元素大小已经涉及特定的

px

宽度。你的真实代码也是这样吗？这正是我想要的。谢谢