Почему мои гибкие дети не одинакового размера? ⇐ CSS

[Anonymous]

I am re-writing my question after digging further and finding that this issue is only evident on some devices, suggesting it is related to viewport size.

As you can see in the code, the parent has a set height + width and the children should all have identical heights.

Yet as you can see in the picture below, a screenshot from my laptop, the code in the demo sometimes produces children of different sizes based on the size of the parent container and as I just mentioned, the device it's viewed on.

So how can I ensure they appear equal heights regardless of the device they are viewed on or/the size of the parent container?

Bug-example
console.clear(); .header { height: 200px; width: 500px; margin: auto; display: flex; } .flex-container { height: 20px; width: 20px; background-color: black; margin: auto; display: flex; justify-content: space-around; align-items: center; flex-direction: column; transform: scale(5); } .child { display: block; background-color: white; height: 10%; width: 90%; }

Источник: https://stackoverflow.com/questions/781 ... qual-sizes