取一个 div 占用所有剩余空间 b/w 其容器中的其他两个元素答案

【问题标题】：Take a div take-up all the remaing space b/w two other elements in its container取一个 div 占用所有剩余空间 b/w 其容器中的其他两个元素
【发布时间】：2017-10-22 09:54:01
【问题描述】：

我有一个容器，里面有三个元素：下拉菜单、搜索栏和搜索按钮，从左到右。

我已将下拉菜单固定在容器的最左侧，这是它的 CSS：

.dropdown {
  width: auto !important;
  float: left !important;
}

我已将搜索按钮固定在最右侧，这是它的 CSS：

.search-button {
  float: right !important;
  width: auto !important;
}

我希望搜索栏占据两个元素之间的剩余空间。此外，下拉菜单的大小会有所不同，因此搜索栏的宽度应仅从左侧更改，而右侧（附加到搜索按钮）根本不应该移动。我如何实现它？我尝试了 display: table 和 flexboxes，但似乎没有任何效果。

谢谢！

【问题讨论】：

你能在 jsfiddle 或这里分享你的代码吗？
实际上，我无法共享任何工作代码，因为我使用的是自定义语言和其他东西。问题中提供的信息是否不足？我还能为您提供哪些数据？
只分享你的html代码

标签： javascript html

【解决方案1】：

CSS flex box 绝对是您想要使用的！

flex - CSS on MDN

【讨论】：

似乎不起作用。我将 display: flex 添加到容器中，并将 flex: auto 添加到中间元素。整个容器缩小。此外，当下拉菜单的大小发生变化时，甚至搜索按钮也会移动。
老兄，感激不尽。 Apply flex-boxes 也给了我一些关于 CSS 的基本知识。
很高兴能帮到你！