Flexbox元素定位：宽屏布局适配需求（HTML结构不可修改）

以下是满足需求的CSS修改方案，完全基于Flexbox实现，且未改动HTML结构：

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  border: 2px solid black;
  flex-wrap: wrap;
}

.one {
  background-color: red;
  flex-basis: 120px;
  height: 80px;
}

.two {
  background-color: yellow;
  flex-grow: 1;
}

.three {
  background-color: green;
  height: 30px;
  flex-basis: 100%;
}

@media only screen and (min-width: 500px) {
  .one {
    flex-shrink: 0; /* 防止红色元素被压缩 */
  }
  .two {
    flex-grow: 0;
    flex-basis: calc(100% - 120px); /* 宽度等于容器总宽减去红色元素宽度 */
    height: calc(80px - 30px); /* 高度等于红色元素高度减去绿色元素高度 */
  }
  .three {
    flex-basis: calc(100% - 120px); /* 和黄色元素保持相同宽度 */
  }
}

关键说明： #

• 宽屏模式下，给.one添加flex-shrink: 0，确保它的固定宽度不会被挤压变形。
• 调整.two的flex-grow为0，并用calc(100% - 120px)设置宽度，使其刚好占据红色元素之外的所有空间；同时计算高度为80px - 30px，保证和绿色元素的总高度与红色元素一致。
• 给.three设置和.two相同的flex-basis值，让它的宽度和黄色元素完全匹配，同时保持原有高度30px，两者总高度刚好为80px。

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