CODEWITHSUNDEEP
cssflexboxtailwind-css
Paolo
Paolo

Reputation: 117

Dynamic flex item width

I made a working example what I want to achieve: Tabs fill up the given space evenly, if the text is too long, it is truncated with ellipsis.

enter image description here

The problem starts, if I wrap it into flex div. (It is a legacy code and part of complex template, and I want ot make as little change as possible)

.box {
  border: 2px dotted rgb(96, 139, 168);
}

.box div {
  min-width: 0px;
  display: flex;
  align-items: center;
  border: 2px solid rgb(96, 139, 168);
  border-radius: 5px;
  background-color: rgba(96, 139, 168, .2);
}
<script src="https://cdn.tailwindcss.com"></script>

<b>Expected</b>
<div class="box h-16 flex items-stretch">
  <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
  <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
  <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
  <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
  <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
</div>

<b>Wrong</b>
<div id="wrapper" class="w-full mb-8 flex items-stretch">
  <div class='mr-2 flex items-center'>
    <a class="truncate">Link 1</a>
    <a class="truncate">Link 2</a>
  </div>
  <div class="box h-16 flex items-stretch">
    <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
    <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
    <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
    <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
    <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
  </div>
</div>

The problem, that in the second example the tabs do not shrink, they expand the viewport with a scrollbar.

enter image description here

Here is the jsbin

Upvotes: 3

Views: 156

Answers (1)

return_false
return_false

Reputation: 738

You just need to add width and overflow properties to the ".box" div. working example below.

.box {
  border: 2px dotted rgb(96, 139, 168);
  
  /* ADD THESE PROPERTIES */
  width: 100%;
  overflow: hidden;
}

.box div {
  min-width: 0px;
  display: flex;
  align-items: center;
  border: 2px solid rgb(96, 139, 168);
  border-radius: 5px;
  background-color: rgba(96, 139, 168, .2);
}
<script src="https://cdn.tailwindcss.com"></script>

<b>Expected</b>
<div class="box h-16 flex items-stretch">
  <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
  <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
  <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
  <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
  <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
</div>

<b>Wrong</b>
<div id="wrapper" class="w-full mb-8 flex items-stretch">
  <div class='mr-2 flex items-center'>
    <a class="truncate">Link 1</a>
    <a class="truncate">Link 2</a>
  </div>
  <div class="box h-16 flex items-stretch">
    <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
    <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
    <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
    <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
    <div><span class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span></div>
  </div>
</div>

Upvotes: 1

Related Questions