如何根据具有动态宽度的父容器设置比例宽度

Question

我有一个具有动态宽度的div（使用百分比大小）。在这里面我有两个按钮，问题来了，我必须让这两个按钮具有相同的容器长度。

到目前为止，我已成功使第一个按钮具有动态宽度，但这2个按钮并未覆盖容器的所有内容

这是我的code

你可以在小提琴中看到，css类：＆＃34; btn-stretch＆＃34;，这个类需要85％的父容器

所以这两个按钮需要与输入字段的宽度相同。

这是基本结构：

<div>
   <input widthDynamic1/>
</div>
<div>
   <button1 widthDynamic2/>
   <button2 widthStatic3/>
</div>

其中：

widthDynamic1 = widthDynamic2 + widthStatic3

Answer 1

您可以添加此css属性：

.btn-group {width:100%;}
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {

    width: calc(100% - 26px);
}

<强> FIDDLE