绝对定位的最大宽度

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 时，它将开始从右侧浮动并进入中心screen -----> 注意 -----> （我看到一个答案说使用内部容器以更好地控制宽度，如果有人知道如何使用 react-modal 做到这一点，那么我会失望，但是现在我不知道该怎么做，所以任何其他方法都会受到赞赏）谢谢。编辑：我浏览了你的 react-modal 文档，似乎我不能做内部容器的想法

Answer 1

要使此侧面模态，请不要设置left 。 相反，设置right并给它你想要的宽度：

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