绝对定位的最大宽度

Question

我正在使用一个名为 react-modal 的库并试图完成类似这样的事情

现在我想让它（sideModal 让我们称之为）只占屏幕的 50% 直到某个点，然后我希望它的最大宽度为 15rem 但它仍然连接到屏幕的侧面

const customStyles = {
  content: {
    top: 0,
    bottom: 0,
    right: "-50%",
    left: "50%",
    borderRadius: "none",
    // maxWidth: "15rem", if I uncomment this when Modal gets to 15rem it floats away from left of screen
  },
  overlay: {
    background: "rgba(22, 54, 84, 0.6)",
  },
};

这是我目前所拥有的，它成功地将模态框保持在屏幕尺寸的 50% 但是如果我取消注释掉 maxWidth，当模态框达到 15rem 时，它将开始从右侧浮动并进入屏幕中心 -----> 注意 -----> （我看到一个答案说使用内部容器以便更好地控制宽度，如果有人知道如何使用 react-modal 做到这一点，那么我下来，但现在我不知道该怎么做，所以任何其他方法都会受到赞赏）谢谢。编辑：我浏览了你的 react-modal 文档，似乎我不能做内部容器的想法

Answer 1

要使这个边模态，不要设置left。相反，设置 right 并给它你想要的宽度：

content: {
  top: 0,
  bottom: 0,
  right: 0,
  width: '50%',
  maxWidth: '15rem',
  borderRadius: "none",
}