使右div可调整大小

Question

I have two divs in another div container on the page. I want to make first div fix width and the second div rsizable.

<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;
}

But in this case the second div go out from the container on the right side. How to make second div resizable started from the right side of the first div to the end of container.

Answer 1

Try this. 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;
}

Answer 2

You can do this with Flexbox . With flex: 1; on #second div, it will take rest of space on right. 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> 

Or you can do this with CSS table 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 3

in second div change all to overflow: hidden and input width: 100% :

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

#second {
  overflow: hidden;
}

input {
  width: 100%;
}

jsfiddle-link