Flex布局下如何让子元素宽度自适应内容而不填满父容器？

巧用flex布局实现子元素内容自适应宽度

在使用flex布局时，常常需要子元素宽度根据内容自动调整，而不是充满整个父容器。例如，在一个垂直排列的Flex容器中，如何让子元素宽度自适应内容，同时保持背景颜色完整显示，避免手动设置固定宽度导致内容显示不全？本文将提供一种简洁的解决方案。

问题场景：

假设一个Flex容器，垂直排列两个区块。上半部分内容宽度自适应，下半部分（例如，“增值税普通发票”区块）也需要宽度根据内容自适应，避免背景颜色溢出，同时防止内容显示不完整。

核心问题： 如何让“增值税普通发票”区块的宽度根据内容动态调整，而不是占据父容器的全部宽度。

解决方案：

关键在于设置“增值税普通发票”区块的width属性为fit-content。fit-content属性会使元素宽度根据其内容大小自动调整，完美解决背景颜色溢出和内容显示不全的问题，确保内容完整显示的同时保持视觉协调性。 只需简单设置此属性即可达到预期效果。