Html 在中间填充DIV剩余空间

我有这个HTML结构（简化）。我想使徽标、

输入

和

按钮

为：

1） 在标题中垂直对齐

2） 徽标和按钮具有固定大小。我希望在这两个项目中间的<>代码>输入/代码>是它们之间的剩余<代码>宽度< /代码>。 （徽标位于左侧，

按钮位于右侧。
输入
然后输入中间位的宽度）

然后，调整窗口大小时，
输入
文本将自动调整大小

<div class="header">
    <div id="logo">Logo here</div>
    <input type="text"/>
    <div class="button>Button title</div>
</div>


这里的标志
使用flexbox，您可以做到这一点


应用
显示：flex
到父级（
.header
），因此整个容器现在是一个flex元素
使用父项（
.header
）中的
对齐项目：居中对齐项目以垂直对齐，请参见有关的详细信息

将
flex:1
（flex-grow:1
flex-shrink:1
flex-basis:0
）应用于
输入
，以增加剩余空间


.header{
显示器：flex；
/*justify content:space-between；*//*这是可选的，因为输入{flex:1}正在执行其工作*/
对齐项目：居中；
/*演示*/
边框：1px纯红；
高度：60px；
}
输入{
弹性：1；
/*演示*/
利润率：0.10px；
}

这里的标志
按钮标题
您探索过flex box

解决方案吗？如果您不担心旧式浏览器的兼容性，那么这将是最有效的方法，让浏览器完成所有计算。flex-CSS | MDN：