使正确的 div 可调整大小

Question

我在页面上的另一个 div 容器中有两个 div。我想让第一个 div 固定宽度，第二个 div 可调整大小。

<div id="container">
 <div id="first"></div>
 <div id="second">                    
       <input id="edit" />
 </div>
</div>

CSS：

#first {
            width: 140px;
            height: 50px;
            float:left;
        }
#second
        {
            position: absolute;
            left: 140px;
            width: 100%;
        }
#container {
        width: 100%;
        position:relative;
}

但在这种情况下，第二个 div 从右侧的容器中出来。如何使第二个 div 的大小从第一个 div 的右侧开始到容器的末尾。

Answer 1

您可以使用 Flexbox 做到这一点。在#second div 上使用flex: 1;，它将占用右侧的剩余空间。 Fiddle

#container {
  display: flex;
}

#first {
  width: 150px;
  background: blue;
}

#second {
  flex: 1;
  background: #939A9F;
}

#second input {
  width: 100%;
}

<div id="container">
 <div id="first"></div>
 <div id="second">                    
      <input type="text">
 </div>
</div>

或者您可以使用 CSS 表格 Fiddle

#container {
  display: table;
  width: 100%;
}

#first {
  width: 150px;
  background: blue;
  display: table-cell;
}

#second {
  background: #939A9F;
  display: table-cell;
}

#second input {
  width: 100%;
}

<div id="container">
 <div id="first"></div>
 <div id="second">                    
      <input type="text">
 </div>
</div>

Answer 2

在second div 中全部更改为overflow: hidden 和input width: 100%：

#first {
  width: 140px;
  height: 50px;
  float: left;
}

#second {
  overflow: hidden;
}

input {
  width: 100%;
}

jsfiddle-link

Answer 3

试试这个。 https://jsfiddle.net/o7e5x0p0/2/

#first {
  width: 25%;
  height: 50px;
  float: left;
  background: red;
}

#second {
  float: left;
  height: 50px;
  width: 75%;
  background: green;
}

input {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}