Flex布局下如何讓子元素寬度自適應內容而不填滿父容器？

巧用flex布局實現子元素內容自適應寬度

在使用flex布局時，常常需要子元素寬度根據內容自動調整，而不是充滿整個父容器。例如，在一個垂直排列的Flex容器中，如何讓子元素寬度自適應內容，同時保持背景顏色完整顯示，避免手動設置固定寬度導致內容顯示不全？本文將提供一種簡潔的解決方案。

問題場景：

假設一個Flex容器，垂直排列兩個區塊。上半部分內容寬度自適應，下半部分（例如，“增值稅普通發票”區塊）也需要寬度根據內容自適應，避免背景顏色溢出，同時防止內容顯示不完整。

核心問題： 如何讓“增值稅普通發票”區塊的寬度根據內容動態調整，而不是占據父容器的全部寬度。

解決方案：

關鍵在于設置“增值稅普通發票”區塊的width屬性為fit-content。fit-content屬性會使元素寬度根據其內容大小自動調整，完美解決背景顏色溢出和內容顯示不全的問題，確保內容完整顯示的同時保持視覺協調性。 只需簡單設置此屬性即可達到預期效果。