aurelius aurelius - 4 months ago 12
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:

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


where:

widthDynamic1 = widthDynamic2 + widthStatic3

Answer

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);
}

FIDDLE