如何确保弹性项目受其子宽度的影响？

Question

我有以下flex和它的孩子（img）：

<div class="flex">
  <img>
</div>

.flex {
  position: relative
  -webkit-box-pack: center!important
  display: flex!important
  box-sizing: inherit
}

img {
  max-height: 124px
  height: 100%
  vertical-align: middle
  box-sizing: inherit
}

有时.flex没有宽度......有时候它有。

如何确保.flex始终具有孩子的宽度？ （在这种情况下是图像？）

Answer 1

您要找的是将 width: fit-content 应用于flex元素。

如果没有这个，以下示例中的.flex将延伸到容器的边缘。
使用此选项，.flex仅延伸到包含在其中的内容的宽度（在这种情况下，图片）：

.flex {
  display: flex;
  border: 1px solid red;
  width: fit-content;
}

<div class="flex">
  <img src="http://placehold.it/100">
</div>

希望这有帮助！ ：）

Answer 2

作为fit-content设置为父{4}}，缺少合理的浏览器支持，请使用width。

inline-flex

.flex {
  display: inline-flex;
  box-sizing: inherit;
  border: 1px dotted blue;
  align-items: center;         /*  vert. align img  */
}

.flex img {
  display: block;
  max-height: 124px;
  height: 100%;
  box-sizing: inherit;
}

注意，由于浏览器之间的不一致，作为弹性项目的<div class="flex"> <img src="http://placehold.it/500x350/"> </div> <div class="flex"> <img src="http://placehold.it/500x50/"> </div>可能会以不同方式呈现，而包装器通常会修复它。