I have existing tabs layout created with table. Due to new style requirement I cannot use this approach anymore. I am trying to switch to flex, but min-width idea I use with table doesn’t work on div.
In my example below if you resize page paddings to the left and right of tab text are resizing (from 32px to 8px), but it doesn’t happen for flex div layout.
div.table-container, div.flex-container {
min-width: 100%;
padding-bottom: 32px;
}
table {
border-collapse: collapse;
}
td.left, td.right {
min-width: 8px;
width: 32px;
}
td {
border-top: 1px solid black;
}
td.left {
border-left: 1px solid black;
}
td.content {
white-space: nowrap;
}
td.right {
border-right: 1px solid black;
}
td.space {
border-top: none;
width: 4px;
}
div.flex {
display: flex;
gap: 4px;
}
div.tab {
border: 1px solid black;
border-bottom: none;
display: flex;
}
div.left, div.right {
display: inline-block;
min-width: 8px;
width: 32px;
}
div.content {
white-space: nowrap;
}<div class="table-container">
<table>
<tr>
<td class="left"></td>
<td class="content">Tab QWERTY</td>
<td class="right"></td>
<td class="space"></td>
<td class="left"></td>
<td class="content">Tab ABCDEF</td>
<td class="right"></td>
<td class="space"></td>
<td class="left"></td>
<td class="content">Tab ZXCVBB</td>
<td class="right"></td>
<td class="space"></td>
<td class="left"></td>
<td class="content">Tab POIUYT</td>
<td class="right"></td>
<td class="space"></td>
<td class="left"></td>
<td class="content">Tab LKJHGF</td>
<td class="right"></td>
</tr>
</table>
</div>
<div class="flex-container">
<div class="flex">
<div class="tab">
<div class="left"></div>
<div class="content">Tab QWERTY</div>
<div class="right"></div>
</div>
<div class="tab">
<div class="left"></div>
<div class="content">Tab ABCDEF</div>
<div class="right"></div>
</div>
<div class="tab">
<div class="left"></div>
<div class="content">Tab ZXCVBB</div>
<div class="right"></div>
</div>
<div class="tab">
<div class="left"></div>
<div class="content">Tab POIUYT</div>
<div class="right"></div>
</div>
<div class="tab">
<div class="left"></div>
<div class="content">Tab LKJHGF</div>
<div class="right"></div>
</div>
</div>
</div>
2
Answers
I achieved what I want with
flex-grow/flex-shrink,min-width/max-width:I came up with a solution that only adds two declarations to the CSS. The main thing is to define a max-width for the tab. However, this may not work if the number of tabs will vary.
Since there are five tabs, each one should have a max-width of 20%. However, you have to account for the gap. Four gaps at 4px each amounts to 16px. Divide by the number of tabs and subtract this value from the 20%.