How does padding supposed to work?

[srfsh]

I am a bit puzzled on how padding supposed to work. I am trying to approach this using my existing knowledge coming from systems such as css, flutter, and compose. What I have in mind is to control the padding of my components, such as various bars (navigation, menu, etc), and animate it whenever I need (for expansion effect).

Here's a demo I would like one to check out to see what I am talking about.

Now, I have already read the documentation regarding how layouting works, but just I can't wrap my head around this problem. Something is obviously out of order given my current expectations. This is either a problem with my understanding of how layouting works, or there could be a bug somewhere regarding this.

Feel more than welcome to take this as an issue if it really is a bug. And I would really appreciate if some kind person would guide me to the ways in which the layouting system should work. In the latter case, feel free to suggest edits to the title to make it more accessible to others. Many thanks!

[ogoffart]

This looks like a bug.
I've filled #8091 to track it.