Hello.
I am struggling with CSS for pomodoro clock project. I added some transition functionality to my buttons (icons grow bigger on hover), but at the same time, I don’t want items inside the box to move away from growing icon (i am using flex-box). I don’t know how to explain, it’s best to see in practice. I added some ugly borders around containers, so you guys can see what I mean. I don’t want items in .duration-control to move around, but I want them to be aligned like they are (jusfity-content: space-around). I made a screen recording of how I don’t want my app to behave: iCloud
Here is my github repository: GitHub
Yep, that’s how flexbox works. If you really want to use flex box then you need to put the “growing items” in a large container that allows them room to grow. You have the space to position large containers then don’t use flexbox to postion your “grow items” within their container