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

Question

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

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

这是我的 code

可以看到在fiddle,cssclass:"btn-stretch",这个class占父容器的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);
}

How to set proportional width based on parent container with dynamic width