CSS响应顶栏输入

我想做一个顶级酒吧
看起来像谷歌游戏！

但我无法使灵活的输入框适应窗口大小……
Div.search的最小宽度为250px，但不起作用。。 救命啊

*{
框大小：边框框；
}
.顶杆{
位置：固定；
排名：0；
左：0；
宽度：100%；
最小宽度：900px；
高度：60px；
背景色：#FFFFFF；
边框底部：1px实心#C7C7C7；
}
.菜单{
位置：绝对位置；
顶部：15px；
左：30px；
宽度：30px；
高度：30px；
背景色：#777777；
}
.标志{
位置：绝对位置；
顶部：10px；
左：70像素；
宽度：100px；
高度：40px；
背景色：#80DF5F；
}
.搜索{
flex:02自动；
位置：相对位置；
利润率：15px 0px 0px 200px；
右边填充：50px；
最小宽度：250px；
宽度：700px；
高度：30px；
背景色：#2A77FF；
}
.搜索输入{
显示：块；
宽度：100%；
}
.btn{
位置：绝对位置；
排名：0；
右：0；
宽度：50px；
高度：30px；
背景色：#FF3B3B；
}
.聊天{
位置：绝对位置；
顶部：15px；
右：20px；
宽度：100px；
高度：30px；
背景色：#FFC536；
}

=
标志
按钮
C

添加其他元素的所有宽度（及其水平位置），并使用

计算
设置div
。搜索
宽度：
宽度：计算（100%-380px）

现代浏览器解决方案（IE9+）


*{
框大小：边框框；
}
.顶杆{
位置：固定；
排名：0；
左：0；
宽度：100%；
最小宽度：900px；
高度：60px；
背景色：#FFFFFF；
边框底部：1px实心#C7C7C7；
}
.菜单{
位置：绝对位置；
顶部：15px；
左：30px；
宽度：30px；
高度：30px；
背景色：#777777；
}
.标志{
位置：绝对位置；
顶部：10px；
左：70像素；
宽度：100px；
高度：40px；
背景色：#80DF5F；
}
.搜索{
flex:02自动；
位置：相对位置；
利润率：15px 0px 0px 200px；
右边填充：50px；
最小宽度：250px；
宽度：计算（100%-380px）；
高度：30px；
背景色：#2A77FF；
}
.搜索输入{
显示：块；
宽度：100%；
}
.btn{
位置：绝对位置；
排名：0；
右：0；
宽度：50px；
高度：30px；
背景色：#FF3B3B；
}
.聊天{
位置：绝对位置；
顶部：15px；
右：20px；
宽度：100px；
高度：30px；
背景色：#FFC536；
}

=
标志
按钮
C
非常有趣的calc（）函数。我搜索了MDN，但没什么问题。。。关于浏览器兼容性。。IE的基本支持是9。在IE8和早期版本中还有其他的替代方案吗？没问题：）试试我在这本小提琴中提出的解决方案，我也会用它编辑我上面的条目。