在 display: flex 且 flex-direction: column 的布局中，默認情況下子元素會占滿容器的寬度。要讓子元素的寬度根據內容自適應，而不是自動拉伸填滿父容器，你可以這樣處理：

---

? 解決方案一：設置子元素 align-self: start 或 align-items: flex-start（父元素）

.parent {display: flex;flex-direction: column;align-items: flex-start; /* 子元素靠左，寬度自適應內容 */
}

這樣子元素不會拉伸，而是寬度跟隨內容。

---

? 解決方案二：直接給子元素設置 width: fit-content（現代瀏覽器支持）

.child {width: fit-content;
}

如果你只想讓某些子元素內容自適應寬度，可以單獨給這些子元素加上 width: fit-content。

---

🚫 注意事項

不要給子元素設置 width: 100% 或讓父元素 align-items: stretch（默認值），否則會拉伸到和父元素一樣寬。

---