具有绝对定位的最大宽度

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 做到这一点然后我下来了，但现在我不知道该怎么做，所以任何其他方式都将不胜感激）thanks.EDIT：我浏览了你的反应模式文档，看来我不能做内部容器的想法

Answer 1

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

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

具有绝对定位的最大宽度

max-width with absolute positioning

javascript

css

responsive-design

reactjs

react-modal