最大宽度 css 是否有优先级

Question

我有一个div，里面有两个div。 容器是一个flexbox，我设置了两个孩子的MAX-width。 作为一个例子

<div class="wrap">
    <div class="one">Hi</div>
    <div class="two">my second div</div>
</div>

和 SCSS

.wrap {
    display:flex;
    .one{
        max-width:100px;
    }
    .two {
        max-width: 50px;
    }
}

现在我一直认为，如果我调整大小.wrap两者将以相同的比例缩小，例如：-50px 取自两者。 但显然这不是真的

然后我想这可能与给定的最高(或最低(最大宽度有关，但事实并非如此

我注意到的是，其中一个在另一个div几乎没有发生任何事情之前会缩小很多，是什么决定了这种行为？我的问题是，是什么决定了哪一个将首先缩小到最大极限？我尝试删除弯曲并发生了相同的结果，所以我想它只与最大宽度有关？

Answer 1

当您有一个flex容器并且它的子容器未指定flex-basis时，它会回退到具有计算项目宽度的项目

。

可以使用 flex 属性来定义"收缩"/"增长"比率。

我的示例将保留 1/3 - 2/3 的比率。

.wrap {
  display: flex;
}
.one {
  flex: 2;
  background-color: rgba(0, 0, 0, .5);
}
.two {
  flex: 1;
  background-color: rgba(0, 0, 0, .3);
}

<div class="wrap">
  <div class="one">Hi</div>
  <div class="two">my second div</div>
</div>