我有这样的html和css代码。我有两个问题：

1. 当视窗宽度为 600px 时，理论上左框应该是 150px 宽度，因为它是父级（600px）的 25%，但宽度是 120px。
2. 右框不能达到100vw。它只需要widthOfParent- widthOfLeft。我想它应该以某种方式溢位并达到100vw。

 <div class="container">
        <div class="left"></div>
        <div class="right"></div>
 </div>

* {
  margin: 0;
  padding: 0;
}
.container {
  height: 300px;
  /* your code here */
  display: flex;
  justify-content: start;
}

.left {
  background-color: #f44336;
  height: 100%;
  width: 25%;
  min-width: 100px;
}

.right {
  background-color: #2973af;
  height: 100%;
  width: 100vw;
}

密码箱： https ://codesandbox.io/s/admiring-darkness-cu99x ?file=/src/styles.css:0-293

uj5u.com热心网友回复：

你正面临收缩效应。在所有情况下，总宽度100vw 25%都大于100%因此两个项目将同等缩小。

由于您的容器也是全宽的，因此溢位将始终等于25%or 25vw。两个元素都有默认的收缩值1，所以我们的总和等于125vw。

第一个元素的宽度将等于：25vw - (25vw * 25vw/125vw) = 20vw 第二个元素的宽度将是：100vw - (25vw * 100vw/125vw) = 80vw

你可以从逻辑上看到总数是100vw( 20vw 80vw)，当荧屏宽度等于时600px，20vw等于120px。

为避免这种情况，请通过设定禁用第一项的收缩效果 flex-shrink:0

* {
  margin: 0;
  padding: 0;
}

.container {
  height: 300px; /* your code here */
  display: flex;
}

.left {
  background-color: #f44336;
  width: 25%;
  min-width: 100px;
  flex-shrink:0;
}

.right {
  background-color: #2973af;
  width: 100vw;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

相关：为什么弹性项目仅限于父尺寸？

uj5u.com热心网友回复：

1. 对弹性项目使用“flex”属性而不是宽度

2. 右侧元素不能占据 100% 的宽度，因为它与 flex 父级中的左侧 div 一起，我们将宽度自变量分配为“flex: value”

CSS flex 属性 https://www.w3schools.com/cssref/css3_pr_flex.asp