<div class="box">
<div class="a"></div>
<div class="b"></div>
</div>
.box { display: flex;}
.b { flex: 1; }
// 补充:fit-content属性是根据盒子内容高度或宽度的一个总和
// 感兴趣的可以百度一下我说的可能不是特别清楚
.a {width: fit-content;} // 具体宽度或 fit-content都可以
正常两栏布局,但如果b得子元素太宽,会撑开b,导致a的宽度被挤小 将b的宽度设置为width: fit-content;,就可以解决,高度也是一样的。
总结: flex布局,如果自身高度或者宽度被拉伸了,直接把自己的高度或者宽度设置为具体数值即可。