I want to draw 4 circles, being all 4 flex-items, and I need them to scale with the container they are in. I have seen some solutions where padding-bottom is used, but I can´t really understand it.
I managed to get the result that I want with specific width and height in the flex-items. Can anyone do the same but without that and keeping the same structure in my HTML?
.container { display: flex; flex-wrap: nowrap; width: 200px; height: 50px;}.holder { margin-right: 5px; width: 30px; height: 30px; border-radius: 50%;}.h1 { background: blue;}.h2 { background: red;}.h3 { background: green;}.h4 { background: grey;}<div class="container"><div class="holder h1"></div><div class="holder h2"></div><div class="holder h3"></div><div class="holder h4"></div></div>