Html 对Flex收缩和生长非常困惑 .集装箱{ 宽度：100%； 高度：200px； 显示器：flex； } .box1{ 宽度：25%； 最小宽度：400px； 身高：100%； } .box2{ 宽度：75%； 身高：100%； }

所以我要做的是做一个

div

，它是100%宽度。子元素将是25%和75%。我希望25%

div

具有

最小宽度

。因此，我希望75%

div

在最小宽度使

box1

超过25%时自动调整为仅填充剩余空间

无论是

flex-grow

还是

flex-shrink

似乎都不适合我。我不希望

box2

缩小，因为在大多数情况下它应该比

box1

大。我不希望

box2

增长，因为它有时也会比

box1

小

仅供参考：我应该注意，我正在使用一个slick.js滑块。我的两个div没有被插件触及，所以我的滑块被包装在一个额外的容器中（box2）。滑块容器的宽度为框2的100%。我知道flex似乎在这样的情况下会进行动态调整，所以如果我在box2中有一个段落，宽度会动态调整，但使用滑块似乎会让它变得非常挑剔，它需要包含box2的框具有正常工作的宽度。

.container{
显示器：flex；
高度：200px；
边框：1px黑色虚线；
}
.box1{
flex:1 0 400px；/*flex增长、flex收缩、flex基础*/
最大宽度：25%；
背景颜色：绿色；
}
.box2{
柔性生长：1；
背景颜色：橙色；
}

只需修改代码，将最小宽度更改为200px并添加背景色即可查看，对我来说效果很好：为什么不简单地在box2上添加

flex:1

，而不添加任何宽度。。也不需要增加高度：默认情况下，它们100%会拉伸。我试过小提琴，它能用，但里面的滑块不起作用。因此，我认为我需要适当的宽度，而不是在飞行flexbox只是做得最好。我不知道该怎么解释@MarcelSchmid@TemaniAfif我试过了，但由于某种原因，它只给出了

box2

的宽度。我知道这在简化的代码中是有效的，但由于某些原因，在flex框中抛出光滑的滑块会破坏问题的自然解决。我尝试过类似的方法（也尝试过完全相同的方法，得到了相同的结果）。我的box2（我假设是因为滑滑条）的宽度是

759200px

。因此，由于slick slider的内容为无限多的幻灯片创建了一个巨大的轨迹，它一定影响了

flex grow

决定的宽度。如果将其设置为75%，则效果良好，如果将其设置为增长，则会变得巨大，占用的空间远远超过剩余空间。请尝试

溢出：自动

或

最小宽度：0

打开

.box2

。我使用了

最小宽度：0

，它工作了。。。我完全不明白为什么会这样！弹性项目默认设置为

minwidth:auto

。这意味着它们不能小于其内容。使用

最小宽度：0

，您将覆盖该初始设置。这里有详细的解释：。

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.container {
  width: 100%;
  height: 200px;
  display: flex;
}

.box1 {
  width: 25%;
  min-width: 400px;
  height: 100%;
}

.box2 {
  width: 75%;
  height: 100%;
}