如何实现基于flex布局的响应式modal模态框？

响应式调整方案 #

你当前的模态框无法实现弹性自适应的核心原因是flex容器未配置小屏换行规则、内部图片未做尺寸限制，可按以下方案修改CSS：

1. 调整flex容器规则，增加换行配置

.modal-img {
  display: flex;
  gap: 20px; /* 控制图片和文字的间距，可按需调整 */
  flex-wrap: wrap; /* 小屏幕下内容自动换行 */
  width: 100%;
  box-sizing: border-box;
  padding: 15px; /* 避免内容贴边，可按需调整 */
}

2. 给内部图片添加响应式限制，避免尺寸溢出

.modal-size {
  flex-shrink: 0;
  max-width: 250px; /* 图片最大宽度，可按需调整 */
  width: 100%;
  height: auto;
  object-fit: cover;
}

3. 给右侧文字列表配置弹性占比规则

.profile-info {
  flex: 1; /* 自动占满剩余可用宽度 */
  min-width: 200px; /* 宽度低于阈值自动触发换行，可按需调整 */
  margin: 0;
  padding: 0;
  list-style: none;
}

4. 补充模态框基础规则，避免内容超出视口

.modal{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 200ms ease-in-out;
  border: 1px solid black;
  background: white;
  z-index: 10;
  width: 900px;
  max-width: 95%; /* 移动端提升空间利用率，可按需调整 */
  max-height: 90vh; /* 限制最大高度不超过视口的90% */
  overflow-y: auto; /* 内容过多时内部滚动 */
  box-sizing: border-box;
}

调整后小屏幕下图片和文字列表会自动上下排列，不会出现内容溢出的问题。

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