Set equal width in flex but different with other childs

Asked Apr 27 '19 at 09:17

Active Apr 27 '19 at 09:34

Viewed 43 times

What I'm trying to do is, make a view exactly like table but with div what I did, use flex and calc() to make equal width between rows but first row should has different width (bigger than other) for this I used 100%/1 it working when it is empty but when it has content, not working anymore. See below example:

.tr {
    display: flex;
}

.tr .th,.tr .td {
    width: calc(100%/5);
    border: 1px solid blue;
}

.tr .th:first-child, .tr .td:first-child {
    width: calc(100%/1);
    border: 1px solid red;
}

<div class="tr">
  <div class="th">T</div>
  <div class="th">T</div>
  <div class="th">T</div>
  <div class="th">T</div>
  <div class="th">T</div>
</div>

<div class="tr">
  <div class="td">Bdddddddddddddddd    22323 23 </div>
  <div class="td">Bdddddd</div>
  <div class="td">Bdddddddddddd</div>
  <div class="td">Bdd</div>
  <div class="td">Bdddddddddddddd asd</div>
</div>

What I want to set equal width for all rows but first rows should has equal width but longer than other. In above example, as you see rows not equal.

edited Apr 27 '19 at 09:21

Temani Afif

245,468
26
309
415

asked Apr 27 '19 at 09:17

Jack The Baker

1,781
1
20
51

min-width:0 to all the divs – Temani Afif Apr 27 '19 at 09:19
@TemaniAfif `min-width:0` not solve my problem – Jack The Baker Apr 27 '19 at 09:21
@TemaniAfif Test it then close the topic! – Jack The Baker Apr 27 '19 at 09:22
I already tested (https://jsfiddle.net/2vxyrgbo/), this is not what you want? if no, then add more details about the layout you want – Temani Afif Apr 27 '19 at 09:24
or probably you want it like this: https://jsfiddle.net/2vxyrgbo/2/ (I can add another duplicate for this too) – Temani Afif Apr 27 '19 at 09:31
Another simple solution would be to change the (100%/5) to (100%/2.5) and change the (100%/1) to (100%/1.5) – Christopher Bennett Apr 27 '19 at 11:37

Set equal width in flex but different with other childs

0 Answers0