如何动态放置绝对位置以适应父母？

Question

好吧，有点难以解释我在找什么，但你知道当你有一个下拉菜单时，当下拉菜单内容不适合屏幕时，下拉菜单会改变方向或移动一点以适应屏幕？

我有一个组件，它包含一个带绝对定位的下拉菜单和一个有 3 列的显示网格。在我到达屏幕右侧之前效果很好，然后它被压扁并溢出到右侧，就像这样：

我想要发生的是：

在这种情况下，我只是在下拉元素上手动设置 right:0，但由于它是一个组件，我想保持它的通用性，并使其自动具有这样的逻辑：如果它向右溢出，则右移：0.

当然它也应该在每个方向上都可以扩展（尽管我无法想象那里有很多用例），或者，一般来说：“如果它会溢出到右/左/上/下，那么设置（每个溢出）右/左/上/下：0.

这甚至可能仅使用 css 吗？

Answer 1

请分享html代码和部分css。

Answer 2

尝试在你的 CSS 上使用这样的东西

.dropdown {
  position: absolute;
  transform: translateX(-100%);
  right: 0;
}

.dropdown.is-open {
  transform: none;
}

也许会奏效