Html 如何使这两个div'；s仍然显示在同一行中，而第一行具有固定的宽度，而另一行则随着页面而相应缩小？

第一个具有固定宽度的div，我希望它始终保持相同的宽度

 it is  container 
main {  
  max-width: 1000px;
}

main div {
  padding: 30px;
  box-sizing: border-box;
}

---

当页面调整大小时，我希望它相应地缩小，并且仍然与“first div”保持一致，因为代码段显示的区域很小，所以我将main.first的宽度改为100px，因为70%+300px不适用于小屏幕。对于小屏幕，您必须减少百分比或像素

main{
最大宽度：1000px；
}
主要部门{
填充：30px；
框大小：边框框；
}
main.first{
背景：红色；
宽度：100px；
浮动：左；
显示：内联块；
}
主要的，第二{
背景：绿色；
宽度：70%；
浮动：左；
显示：内联块；
}

---

您可以通过以下两种方法之一可靠地完成此操作，这两种方法都需要CSS级别3：

FlexBox

main{
显示器：flex；
最大宽度：1000px；
}
主要部门{
填充：30px；
框大小：边框框；
}
主要的，首先{
背景色：红色；
宽度：300px；
}
主要的，第二{
背景颜色：绿色；
弹性：1；
}

---

快速回答使用CSS3

calc（）

当
div
具有固定的
宽度时，
calc（）
可以减去该值，以使
div
始终保持内联（与
float
一起）


main{
最大宽度：1000px
}
主要部门{
框大小：边框框；
浮动：左；
填充：30px
}
主要的，首先{
背景：浅蓝色；
宽度：300px
}
主要的，第二{
背景：浅绿色；
宽度：计算（100%-300px）
}

使用显示：内联；对于CSS中的两个div。嗨，这真的很有用，但是你还知道学习display:flex的教程吗？这是我以前从未听说过的n选项。非常感谢您的回复。请检查此关于
flexbox
，如果您觉得此答案有用，请确保将其标记为已接受感谢您的回复。
main .first { 
  background: red;
  width: 300px;
  float: left;

}



main .second {
  background: green;
  width: 70%;
  float: left;

}