如何让三列div中间那个自适应宽度

效果如图：

 

直接上代码，具体看注释：

	<header class="hasManyCity" id="header">
		<!-- 左边部分。设置为左浮动，要设置宽度-->
		<div class="loc" style="float: left; width:40px; height: 100%; text-align: center; padding-top: 5px;">
			<i class="icon iconfont">&#xe607;</i><br/>厦门
		</div>
		<!-- 右边部分，设置为右浮动。要设置宽度-->
		<div class="msg" style="float: right;">
			<i class="icon iconfont">&#xe609;</i><br/>消息
		</div>
		<!-- 中间部分，不设置浮动（即float:none）和宽度（即 width:auto）；设置左右的margin，以便给左右部分留出空间，否则会重叠在左右部分上；该部分代码放在最后 -->
		<div style="margin-left: 50px; margin-right: 50px; padding-top: 10px;">
			<div style="border: 1px solid #AAAAAA; height: 25px; background-color: #ffffff; border-radius: 10px;">
				<i class="icon iconfont" style="float: left; padding: 5px 5px 0 5px;">&#xe608;</i>
				<i class="icon iconfont" style="float: right; padding: 5px 5px 0 5px;">&#xe60e;</i>
				<div style="margin-left: 30px;margin-right: 30px; height:100%;">
					<input type="text" style="border: 1px dotted green; width:100%; height: 100%;" />
				</div>
			</div>
		</div>
	</header>