css Question posted in
Some basic documentation can be found here.

Css – Why are my flex children not equal sizes?

I am re-writing my question after digging further and finding that this issue is only evident on some devices, suggesting its 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 its viewed on.

So how can I ensure they appear equal heights regardless of the device they are viewed on/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%;
}
<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>
Tags:

2

Answers


  1. 0

    Try using "flex-basis" along with the "max-width". this will ensure a more robust construction

    Login or Signup to reply.
  2. 0

    As you already choose to build the flex-box flow you may ignore the width of children elements – just leave them with full scale. Set only the height param. Also, for parent container you may add some paddings and gaps – it’ll plays perfectly with flex-box.
    Down there a sample with TailwindCSS (as I saw you already added it to your example), but you free to transform it all into custom styles for your best practice.

    <script src="https://cdn.tailwindcss.com"></script>
<div class="h-screen p-24 bg-slate-900 text-white">
  <!-- flex-container -->
  <div class="w-20 h-20 flex flex-col justify-center items-center gap-4 p-3 bg-slate-700">
    <!-- lines -->
    <div class="w-full h-4 bg-white"></div>
    <div class="w-full h-4 bg-white"></div>
    <div class="w-full h-4 bg-white"></div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search