I’d like to know, in simple terms, what it takes to create a dynamically sizing element with a predetermined ratio, e.g. a square.
I have a toolbar with a row of buttons. I need a button to fill the space in its parent in the smaller dimension and keep it’s ratio, so that the buttons fill a square space within the toolbar and keep themselves spaced from the other buttons and don’t force the toolbar to grow from it’s allocated size(sized with flex grow).
I have tried to create dynamic sizing square and circle buttons for a couple days. It feels like this should be one of the simplest thing possible.
Setting the size in px makes it no longer dynamic. Setting larger max sizes breaks the ratio.
I’ve tried using % instead of px, but I don’t really understand what % means here? ( Or as off topic, what does % mean as font size? )
I’ve tried creating nested elements around the button to control the size, but no luck.
I found some CSS tips, where one should set the width as 100% and padding-bottom as 100%. It seems to rely on the % depending on the same value of the direct parent. But it doesn’t seem to be the case here as setting 100% seems to be something entirely different from the parent size. Tried this both on the button itself and as a nested structure.