小程序两个不固定宽度占满一行

需求：两个块都不固定宽度。根据左侧不固定内容的宽度，占满右侧内容；

 

 

<view id="container">
    <view id="left"><text>深圳市</text></view>
    <view id="mid"><text>搜索框</text></view> 
</view>

#container {
    width: 100%;
    height: 200rpx;
    display: table;
}
#left, #mid {
    display: table-cell;
    background: #ccc;
    outline: 2px dashed blue;
}
#mid {
    width: 100%;
    background: #f0f;
}