Modal高度自适应异常求助：内嵌图片无法滚动显示完整

主页面和弹出的Modal窗口垂直高度均设为auto，但在Modal中放入height:auto的图片后，出现页面无法滚动、无法查看完整图片的问题，即使修改overflow设置也无效，主页面高度似乎被固定。希望主页面的auto高度能随Modal高度动态调整。

相关代码 #

layout.jsx

function Layout(props) {
  return (
    <div className={styles.layout}>
      <Header />
      <main className={styles.main}> {props.children} </main>
      {/*<Footer />       */}
    </div>
  );
}

layout.module.css

.layout{
 /* padding-top: 80px;*/
  height: auto;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0;
  width:100%;
}

.main{
  min-height: 1024px;
  background-color: white;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'NotoSansKR-400';
}

RefModal.jsx

export default function RefModal({id2, modalVisibleId2, setModalVisibleId2, idea}) {
//Omit some code

  const media = idea.attached_file
  return (
    <MS.ModalWrapper className={modalVisibleId2 == id2 ? classes.show : classes.dis}>
    <MS.MobalBox>
      //Omit some code
        <MS.MobalContents>
          {media && media.map((i)=> 
            i.one.split('.',-1)[i.one.split('.',-1).length-1]==="jpg" ? 
            <MS.ContentImg src={require('../../images/'+i.one)} />
             : "")}
          {media && media.map((i)=> 
            i.two.split('.',-1)[i.two.split('.',-1).length-1]==="jpg" ? 
            <MS.ContentImg src={require('../../images/'+i.two)} />
             : "")}
          <p>{id2}</p>
        </MS.MobalContents>
  
        <MS.TraceBoxWrapper>
          <MS.TraceBox onClick={() => handleLike(idea.thumbs)}>
            <FavoriteOutlinedIcon className={likeBoolean?classes.afterClick1:classes.beforeClick} />
            {like}
          </MS.TraceBox>
          <div style={{width:"26px"}}></div>
          <MS.TraceBox onClick={() => handleSubscribe(idea.scrap)}>
            <StarIcon className={subscribeBoolean?classes.afterClick2:classes.beforeClick} />
            {subscribe}
          </MS.TraceBox>
        </MS.TraceBoxWrapper>

        <RefModalComment />
    </MS.MobalBox>
    
  </MS.ModalWrapper>
  )
}

ModalStyle.jsx

export const MS = {
//omit some code
  HeaderUserInfo:styled.div`
    top:35%;
    width:100%;
    position: relative;
    height: auto;
    display: flex;
  `,
  HeaderUserName:styled.span`
  font-size: 15px;
  line-height: 35px;
  position: absolute;
  margin-left: 40px;
  `,
  HeaderDetail2:styled.div`
    display: inline-block;
    font-size: 15px;
    height: 35px;
    margin-left: 40px;
    display: flex;
    position: absolute;
    align-items: center;
    left:25%;
    width: 50%;
    justify-content: space-between;
  `,
  DetailFeedbackButton:styled.button`
    left: 10%;
    position: relative;
    width: 70%;
    top: 40%;
    height: 40px;
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    box-shadow: none;
    border: none;
  `,
  ModalContents:styled.div`
    width: 100%;
    height: auto;
    position: relative;
    background-color: pink;
  `,
  TraceBoxWrapper:styled.div`
    display: flex;
    justify-content: center;
    height: auto;
    width: 100%;
  `,
  TraceBox:styled.div`
    border: 2px solid #FADA5E;
    border-radius: 10px;
    width: 123px;
    height: 53px;
    background: #FFFFFF;
    margin-bottom: 31px;
    cursor: pointer;
    line-height: 50px;
  `,
  ContentImg:styled.img`
    width: 100%;
    height: 100%;
  `
}

修改方案 #

1. 修复主页面flex布局高度撑开问题
   main的align-items: center会让内容垂直居中，导致Modal高度超出时无法撑开主页面高度，修改为顶部对齐：

   .main{
     min-height: 1024px;
     background-color: white;
     overflow: auto;
     display: flex;
     justify-content: center;
     align-items: flex-start; /* 替换原align-items:center */
     font-family: 'NotoSansKR-400';
     padding-top: 20px; /* 添加上边距避免内容贴顶 */
   }
   

2. 修正Modal图片自适应样式
   ContentImg的height:100%会导致图片拉伸，改为按比例自适应：

   ContentImg:styled.img`
     width: 100%;
     height: auto; /* 替换原height:100% */
     margin: 10px 0; /* 可选：添加上下边距优化排版 */
   `
   

3. 给Modal容器添加滚动逻辑（可选）
   如果Modal是固定定位（脱离文档流），主页面无法感知其高度，需让Modal自身支持滚动，给MobalBox添加样式：

   MobalBox:styled.div`
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 80%;
     max-width: 800px;
     max-height: calc(100vh - 60px); /* 限制最大高度为视口高度减去边距 */
     overflow-y: auto; /* 超出部分滚动 */
     background-color: white;
     border-radius: 8px;
     padding: 20px;
   `
   

内容的提问来源于stack exchange，提问作者JOO