Tailwind css flex 溢出-x w-1/4 不工作

【问题标题】：Tailwind css flex overflow-x w-1/4 not workingTailwind css flex 溢出-x w-1/4 不工作
【发布时间】：2020-08-09 07:05:19
【问题描述】：

当我有 5 个带有 w-1/4 的 div 时，如何在顺风 css 中制作 flex overflow-x？

<div class"flex overflow-auto w-full relative">
  <div class="w-1/4"> sample </div>
  <div class="w-1/4"> sample </div>
  <div class="w-1/4"> sample </div>
  <div class="w-1/4"> sample </div>
  <div class="w-1/4"> sample </div>
</div>

我期待的是第五个 div 会溢出，但 flex 仍然显示第五个 div。我怎样才能让它溢出第五个div？

【问题讨论】：

标签： tailwind-css

【解决方案1】：

不知道你想做什么。你想用 flex: wrap 将第五个 div 放入一个新行吗？否则 flex 因为它会尝试挤入所有的 div。

overflow-auto 制作一个垂直滚动条，但你必须限制父级高度。

【讨论】：

不，我希望它溢出以便我可以滚动，但所有 div 都会调整大小以适应父 div。

【解决方案2】：

只需在内部 div 上添加 flex-none ??

旧答案：

使用 TailwindJIT，使用最小宽度：min-w-[25%] 或在tailwind.config.js 中添加您自己的比例，如here 所述，例如：

module.exports = {
    theme: {
        minWidth: {
            '1/4': '25%',
        }
    }
}

然后使用min-w-1/4。

【讨论】：