After some investigation, I have discovered that the issue I'm experiencing only occurs on certain devices, indicating it may be related to the viewport size.
In the code provided, the parent element has a fixed height and width, while the children are supposed to have equal heights.
However, as shown in the screenshot from my laptop below, the demo sometimes displays children of different sizes depending on the parent container's dimensions and the viewing device.
So, how can I ensure that the children always appear with equal heights regardless of the device or the size of the parent container?
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%;
}
<div class="header">
<div class="flex-container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>