动态弹性项目宽度

Question

我做了一个我想要实现的工作示例：Tabs 均匀地填充给定的 space，如果文本太长，它会被省略号截断。

问题开始了，如果我把它包装成flex div。（这是一个遗留代码和复杂模板的一部分，我希望尽可能少地改变）

.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>

问题是，在第二个示例中，选项卡没有收缩，它们用滚动条扩展了视口。

这是jsbin

Answer 1

您只需将宽度和溢出属性添加到“.box”div。下面的工作示例。

.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>

动态弹性项目宽度

Dynamic flex item width

css

flexbox

tailwind-css