优化响应式弹窗：解决移动端内容裁剪与滚动失效问题

<span><a href="#popup">查看完整食谱</a></span>

<div id="popup" class="overlay">
    <div class="popup">
        <h3>小米粥食谱：</h3>
        <a class="close" href="#">×</a>
        <div class="content">
            <span>所需食材：</span>
            <p>这里是详细的食谱内容，可能会非常长，以至于在小屏幕上需要滚动才能完全显示。例如：小米、水、红枣、枸杞等。制作步骤：1. 将小米淘洗干净；2. 锅中加水烧开，放入小米；3. 大火煮沸后转小火慢熬30分钟；4. 加入红枣和枸杞，继续熬煮10分钟至粘稠。注意火候，防止溢锅。如果内容足够长，弹窗内部就会出现滚动条。</p>
            <p>继续填充一些内容，确保它足够长，能够触发滚动。例如：小米富含多种维生素和矿物质，对身体健康非常有益。常食小米粥有助于健脾养胃，特别适合消化功能较弱的人群。在熬煮过程中，可以根据个人口味添加少量冰糖或蜂蜜，增加风味。如果喜欢更浓稠的口感，可以适当延长熬煮时间，并注意搅拌，避免糊底。在食用时，也可以搭配一些小菜，如腌黄瓜或腐乳，增加食欲。</p>
            <p>最后，请记住，食材的质量直接影响粥的口感和营养价值。建议选择新鲜、饱满的小米。红枣和枸杞也应选用无硫熏的优质产品。希望这份食谱能帮助您制作出美味又健康的小米粥！</p>
        </div>
    </div>
</div>

/* 遮罩层样式 */
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 1000; /* 确保遮罩层在最上层 */
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

/* 弹窗容器样式 */
.popup {
  margin: 70px auto; /* 自动居中，并设置顶部外边距 */
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%; /* 桌面端宽度 */
  position: relative;
  transition: all 0.3s ease-in-out; /* 优化过渡时间 */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* 添加阴影提升视觉效果 */
  /* 可选：微调弹窗垂直位置，使其更居中或向上偏移 */
  /* transform: translateY(-60px); */
  max-height: calc(100vh - 140px); /* 限制弹窗最大高度，避免超出视口 */
  display: flex; /* 使用 flex 布局辅助内容区域高度计算 */
  flex-direction: column; /* 垂直排列子元素 */
}

/* 关闭按钮样式 */
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  line-height: 1; /* 确保关闭按钮垂直居中 */
}

.popup .close:hover {
  color: #007bff; /* 鼠标悬停效果 */
}

/* 弹窗内容区域样式 */
.popup .content {
  flex-grow: 1; /* 让内容区域占据父容器（弹窗）的剩余空间 */
  height: 250px; /* 为内容区域设置一个固定高度 */
  overflow-y: scroll; /* 启用垂直滚动 */
  -webkit-overflow-scrolling: touch; /* 改善 iOS 上的滚动体验 */
  padding-right: 10px; /* 防止滚动条遮挡内容 */
}

/* 媒体查询：移动设备适配 */
@media screen and (max-width: 700px){
  .popup{
    width: 90%; /* 移动端宽度调整 */
    margin: 30px auto; /* 移动端顶部外边距调整 */
    max-height: calc(100vh - 60px); /* 移动端最大高度调整，预留上下边距 */
  }
  .popup .content {
    /* 在移动端，可以根据视口高度动态设置最大高度，确保内容区域有足够的空间并可滚动 */
    max-height: calc(100vh - 180px); /* 100