Html 允许元素从溢出中溢出：隐藏容器

在示例链接中，我有一个flex容器，其中包含一些项目。 在每个项目上都有“x”，将显示工具提示内容（悬停）。 我只想应用水平滚动，并在主容器外显示此工具提示，如何实现

另外，为什么向右滚动时会切断容器

我在这里看到了一些类似的问题，但没有一个答案有用

/*.container{
位置：绝对位置；
显示器：flex；
z指数：99；
溢出y：可见；
溢出-x：自动；
身高：10.6雷姆；
宽度：100vw；
} */
.信息栏{
位置：绝对位置；
显示器：flex；
填充：0.8rem 1.6rem 0.8rem 0.8rem；
背景色：#F2F2；
宽度：100%；
溢出：自动；
}
.资料组{
显示器：flex；
保证金权利：1.8雷姆；
}
.info-section\u项目{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
填充物：1.5雷姆1雷姆；
背景色：#ffffff；
边界半径：2px；
身高：8.6雷姆；
宽度：11.6雷姆；
边框：实心1px#ecf0f1；
}
.工具提示{
位置：绝对位置；
宽度：1em；
高度：1公厘；
顶部：1rem；
右：1rem；
}
.工具提示内容{
显示：无；
位置：绝对位置；
宽度：12雷姆；
最大宽度：12雷姆；
填充：1rem；
右：-1rem；
顶部：9.8雷姆；
z指数：1；
背景色：#ffffff；
边界半径：2px；
盒影：0 2px 3px 0 rgba（0,0,0,0.37）；
边框：实心1px#ecf0f1；
颜色：#515357；
字号：500；
游标：默认值；
}
.工具提示：悬停。工具提示内容{
显示器：flex；
}

项目
x
工具提示
项目
x
工具提示
项目
x
工具提示
项目
x
工具提示
项目
x
工具提示
项目
x
工具提示
项目
x
工具提示
项目
x
工具提示
项目
x
工具提示

• 对于滚动条，可以在样式表中使用

  overflow-x

  和

  overflow-y

• 在主容器外显示内容：如果您说的是

  .info bar

  ，这是不可能的，因为您给了他一个

  溢出：auto

  ，意思是“如果内容比您大，请给我一个卷轴”。而一个溢出可滚动元素的工具提示似乎是ux/ui的禁忌。如果只有

  溢出：可见

  ，则工具提示会明显溢出.info栏
• 为什么向右滚动时会切断容器？我不明白这个问题
• 你的尺寸看起来“奇怪”。是否正在使用

  框大小：边框框

---

如果只想应用水平滚动，请执行“溢出-y:隐藏”。我不太明白您想对x做什么。当您将鼠标悬停在“x”上时，将显示工具提示。我希望工具提示从容器中出来。现在它被剪掉了。这就是问题所在，我不能使用overflow-y:hidden，因为我需要显示tooltip.max-width of info-section\uu项大于最大宽度11.6rem<12rem的工具提示内容。REM有一种解决此类情况的方法。您可以动态创建工具提示，并在mouseover&mouseout上的body中附加/删除它。这将解决您的问题。