aurelius aurelius - 1 year ago 79
CSS Question

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

I have a div which has a dynamic width (using percentage size). Inside this I have two buttons, and here comes the issue, I have to make this two buttons have the same length of the container.

So far I have succeeded in make the first button have a dynamic width, but this 2 buttons do not cover all the with of the container

here is my code

you can see in the fiddle, css class: "btn-stretch", this class takes 85% of the parent container

so those two buttons need to be the same width as the input field.

this is the basic structure:

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


widthDynamic1 = widthDynamic2 + widthStatic3

Answer Source

you can add this css properties:

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

    width: calc(100% - 26px);


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download