Within a container div, I have multiple nested divs arranged side by side. The container is 1100px wide and centered in the browser window. In the example image below, three inside divs are illustrated, but there could be more (divD, divE, etc).
https://i.sstatic.net/XnKBY.png
If the browser window is resized slightly without cutting off the container div, nothing changes.
https://i.sstatic.net/bB8tY.png
The issue arises when the browser window is resized significantly and cuts off the container div.
https://i.sstatic.net/F0GaF.png
In such cases, I want to resize the container div's width to fit within the browser window and move the inside divs to the next line, like this:
https://i.sstatic.net/u0L4C.png
How can this be achieved? Would utilizing bootstrap be beneficial?
This is my current HTML structure:
<div id="container">
<div class="inside-div">
</div>
<div class="inside-div">
</div>
<div class="inside-div">
</div>
<div class="inside-div">
</div>
.inside-div {
width: 80px;
height: 100px;
background: green;
margin-left: 35px;
margin-top: 30px;
display: inline-block;
}
#container {
background: red;
width: 400px;
height: 500px;
margin: 0 auto;
}
Check out a demo here: https://jsfiddle.net/b8do1xs8/