如何确保display: inline-flex元素的子元素不会将其宽度扩展到100%

要确保display: inline-flex元素的子元素不会将其宽度扩展到100%，可以使用以下方法：

1. 设置子元素的宽度：可以通过设置子元素的宽度来限制其扩展到100%。可以使用百分比、像素或其他单位来指定宽度。例如，设置子元素的宽度为固定像素值：width: 200px;。
2. 使用flex-shrink属性：可以使用flex-shrink属性来控制子元素在空间不足时是否收缩。将flex-shrink属性设置为0可以阻止子元素收缩并扩展到100%。例如，设置子元素的flex-shrink属性为0：flex-shrink: 0;。
3. 使用flex-basis属性：可以使用flex-basis属性来指定子元素的初始宽度。将flex-basis属性设置为固定值可以限制子元素的宽度。例如，设置子元素的flex-basis属性为200px：flex-basis: 200px;。
4. 使用max-width属性：可以使用max-width属性来限制子元素的最大宽度。将max-width属性设置为固定值可以防止子元素扩展到100%。例如，设置子元素的max-width属性为200px：max-width: 200px;。

综上所述，以上方法可以确保display: inline-flex元素的子元素不会将其宽度扩展到100%。根据具体需求选择适合的方法来控制子元素的宽度。