你的问题核心在于块级Flex容器默认会占据父元素的全部可用宽度，哪怕内容不需要这么宽——所以哪怕只有一个子元素，.wrapper也会撑到max-width: 80%，再加上padding-right:10vw，就会出现右侧的空白和背景。要实现单元素时容器宽度贴合内容（且子元素尺寸保持不变），可以通过以下调整：

解决方案步骤1：让容器宽度贴合内容 #

给.wrapper添加width: fit-content属性，这个属性会让容器收缩到刚好容纳内容的宽度，同时保留max-width:80%的限制（避免内容过多时超出父容器）。

解决方案步骤2：修正子元素的Flex属性 #

你原来的子元素flex:1加上flex-grow:0的写法有点冗余，直接用flex: 0 0 [固定宽度]来明确子元素的尺寸，确保不管多少个子元素，尺寸都保持一致。这里我们把子元素宽度设为40vw，这样两个子元素并排刚好是80vw，刚好匹配wrapper的max-width，布局更协调。

修改后的完整代码 #

CSS样式 #

.wrapper { 
  display: flex; 
  flex-wrap: wrap; 
  padding-right: 10vw; 
  padding-bottom: 10vw; 
  height: 100%; 
  max-width: 80%; 
  background-color: #F8F8F8;
  width: fit-content; /* 关键：让容器宽度贴合内容 */
}
.wrapper div { 
  flex: 0 0 40vw; /* 固定子元素宽度，确保尺寸不变 */
  margin-top: 10vw; 
  padding-left: 10vw; 
  box-sizing: border-box; 
}

3个子元素的HTML结构（无需修改） #

<div class="wrapper">
  <div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua </div>
  <div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua </div>
  <div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua </div>
</div>

1个子元素的HTML结构（无需修改） #

<div class="wrapper">
  <div> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua </div>
</div>

效果说明 #

• 当有3个子元素时：两个子元素并排（总宽度80vw，触达max-width限制），第三个换行，容器保持80vw宽度，和原来的正常显示一致。
• 当只有1个子元素时：容器宽度收缩为子元素宽度（40vw）加上padding-right:10vw，总宽度50vw，右侧不再有多余的空白和背景，同时子元素尺寸保持40vw不变。

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