Javascript 将div和输入宽度设置为父级的100%

考虑一个父级

，它是

位置：相对的；宽度：100%

。它包含一个

和一个

。我希望它们的宽度为

100%

理想情况下，

应该是固定的（这是一个自定义按钮），而

应该填充剩余的宽度（考虑窗口大小调整）

有没有可能不涉及JS代码

此外，它不是“必须拥有的”，但我希望尽可能支持IE7+

代码：

<div id="parent" style="position:relative; width:100%">
  <div id="button">Click</div>
  <input type="text" id="txt_input" />
</div>

点击

澄清：

---

我当然能够使用javascript。如果没有一个优雅的解决方案，那么它就是。请告诉我。

在这种情况下，框大小：边框框很方便。 假设按钮的宽度为150px

点击

无需额外的HTML元素即可完成。对于现代浏览器，请使用flexbox。下面列出了flexbox的浏览器支持

#父级{
显示器：flex；
}
#钮扣{
宽度：100px；
背景：红色；
}
#txt_输入{
弹性：2；
}

点击

但是输入的内容没有填满div的宽度。@DanielCheng我们有相似的名字和相同的中文姓氏張. :如何支持display:flex用于旧浏览器？@DanielCheng我还添加了浏览器版本支持的详细信息