I'm struggling with adjusting the size of a div responsively based on the surrounding divs. My layout includes buttons on both sides of the page and text in the middle that varies from 0 to 140 characters.
What I aim to achieve is for the buttons to move inward as the page size changes, while the amount of visible text in the middle div decreases. Setting the width with a % didn't give the desired result, as it constrained the size rather than letting it expand or shrink according to the available space.
I need a solution to dynamically adjust the size of the middle item while keeping the outer elements at their respective edges until the middle item reaches a certain width (e.g. don't allow the text to occupy less than 15% of the page).
.leftSide {
float: left;
}
.middle {
display: inline-block;
padding-left: 5px;
min-width: 15%;
background: #ccc;
}
.rightSide {
float: right;
}<div class="header">
<div class="leftSide">
<button>Save</button>
<button>Next</button>
<button>Back</button>
</div>
<div class="middle">Some text here - min char 0, max 140</div>
<!--Comment out the class: middle above and uncomment the class: middle below to see what I mean with the length being a problem when resizing the page-->
<!--<div class = "middle">Text could also be really long like this one is. The cow jumped over the moon bla bla bla.... </div> -->
<div class="rightSide">
<button>Cancel</button>
<button>Other Button</button>
</div>
</div>I've shared my code on jsfiddle: https://jsfiddle.net/KR8T3/8vywe1zr/14/ (In the example, I used plain text in the middle div for simplicity. In reality, the content can range from 0 to 140 characters)