Auto resize content to div

Question

I have a <div class="row"> which will contain dynamically generated buttons (basically I need boxes)

I need the parent div to be of fixed size but need its contents to resize (to fit everything in one row) automatically based on number of buttons inserted.

Consider the following layout:

All of the solutions I have tried need fixed width or the boxes get plotted in new line.

My last option would be using ng-style and setting the width to 100/number of boxes. I need some other solution.

One of the things I have tried so far:

.wrap {
    width:80%;
    margin:0 auto;
}
.wrap div {
    width:23%;
    padding-bottom:23%;
    margin:1%;
    float:left;
    background:gold;
}

<div class="wrap">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

Answer 1

Use flexbox

 div { display: flex; } button { flex: 1 1; } 

 <div> <button>1</button> <button>2</button> <button>3</button> <button>4</button> </div> 

Ex. with your code.

 .wrap { width: 80%; margin: 0 auto; display: flex; } .wrap div { flex: 1 1; padding-bottom: 23%; background: gold; border: 1px solid; } 

 <div class="wrap"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> 

Answer 2

Just using flexbox won't cut it. If you need the box to maintain the square shapes on adding more boxes, you need to use a bit of javascript as well.

What are we doing?

• We're adding more boxes and changing their height by maintaing an iterative variable(i) which checks how many boxes are present and divides the height according to the width. Since, the width is fixed if 3 boxes are present, the height should be equal to width of each item present.
• You can implement a function which counts the number of boxes on load and resizes the flex container height according to it to have the boxes keep the square dimension.

   var flex = document.getElementById("container"); var box = document.getElementById("box1"); var i=1; function add() { i++; var cln = box.cloneNode(true); cln.removeAttribute("id"); flex.appendChild(cln); flex.style.height=(flex.clientWidth/i) + 'px'; } 

   .flexc { display: flex; width: 400px; height:400px; } .box { flex: 1; border-radius: 20px; background: olive; margin:1px; } 

   <button id="add" onclick="add()">Add more boxes</button> <div class="flexc" id="container"> <div class="box" id="box1"></div> </div>