父div内子div设width:auto不生效如何实现自适应左对齐

解决方案 #

方案1（无副作用，保留所有原有特性） #

直接给.child添加margin-right: 100%即可。块级元素的宽度默认占满父容器可用宽度，设置右侧外间距为100%后，可用宽度被压缩，元素会自动收缩到内容宽度，不会脱离文档流，父元素高度也不会塌陷，完全符合所有约束：

.child {
  border: 2px solid green;
  display: flex;
  padding: 10px;
  width: auto;
  /* 新增属性 */
  margin-right: 100%;
}

方案2（保留子元素flex布局特性） #

如果上一个方案不符合你的特殊布局场景，可以使用浮动方案：浮动的块级元素默认会收缩宽度到内容大小，只需要给.child添加float: left属性即可，不会破坏原有的flex布局：

.child {
  border: 2px solid green;
  display: flex;
  padding: 10px;
  width: auto;
  /* 新增属性 */
  float: left;
}

如果后续布局受浮动影响，你可以在父容器末尾添加一个空块级元素设置clear: both清除浮动即可，不会违反父元素不能修改的约束。

方案3（无需保留flex布局） #

直接修改.child的display属性为table，table元素默认宽度规则就是自适应内容，和fit-content效果完全一致：

.child {
  border: 2px solid green;
  display: table;
  padding: 10px;
  width: auto;
}

所有方案均符合约束条件：未使用禁止的width属性，未设置display: inline-block，也未修改父元素的任何样式。

内容的提问来源于stack exchange，提问作者GonEbal