父元素设置flex:1;子元素内容过程导致被撑开

.box { display: flex;}
.b { flex: 1; }
.a {width: 100px;}

正常两栏布局,但如果b得子元素太宽,会撑开b,导致a的宽度被挤小。解决方法有两种:

  • 将b的宽度设置为width: 0;,就可以解决
  • 设置子元素position:absolute;left:0;right:0;

 

你可能感兴趣的:(#,HTML,#,CSS,flex)