I have some squares inline:
.parent {
padding: 0;
list-style: none;
display: flex;
gap: 20px;
}
.parent div {
background: red;
width: 120px;
height: 120px;
}<div class="parent">
<div></div>
<div></div>
<div></div>
<div></div>
</div>I need to resize .parent div if the blocks are not fitted inline.
How to do that using flex?
>Solution :
If you want the divs to resize, you should not use absolute units such as px, but write them as relative size against the parent div, such as in %. However, you might want to max them out at a certain size before they get too big, so you might want to use a max-width such as follows.
.parent {
padding: 0;
list-style: none;
display: flex;
gap: 20px;
}
.parent div {
background: red;
width: 20%;
max-width: 120px;
aspect-ratio: 1;
}<div class="parent">
<div></div>
<div></div>
<div></div>
<div></div>
</div>