html - 最大宽度 css 有优先级吗？

Question

我有一个 div，里面有两个 div。容器是一个 flexbox，我设置了两个 child 的 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 几乎没有发生任何事情之前缩小很多，是什么决定了这种行为？我的问题是，是什么决定了哪个将首先缩小到其最大限制？我尝试删除 flex 并发生相同的结果所以我猜它只与最大宽度有关？

Answer 1

当你有一个 flex 容器并且它的子容器没有指定 flex-basis 时，它会回退到元素的 computed 元素宽度。

您可以使用 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>