เนื้อหาของเอกสารนี้ ใช้ AI ช่วยเขียนนะครับ อยากรู้ว่ามันจะทำได้รู้เรื่องแค่ไหน แต่เท่าที่ดูมัน อธิบายยืดเยื้อชะมัด อยากได้กระชับกว่านี้จัง สงสัยต้องปรับ prompt อีกบาน
ปัญหาที่พบบ่อย
•ScrollArea ไม่ทำงาน content ทะลุออกมา
•Scrollbar ไม่ปรากฏแม้ content ยาวเกิน
•Container ขยายตาม content แทนที่จะถูกจำกัดโดย parent
ตัวอย่างโค้ดที่มีปัญหา
ต้นเหตุของปัญหา
Flexbox มี default value ที่เป็นต้นเหตุของปัญหา:
ค่า auto หมายความว่า "ขนาดต่ำสุดต้องพอกับ content ภายใน" กล่าวคือ flex item จะไม่ยอมเล็กกว่าขนาดของ content แม้ว่า parent จะกำหนดขนาดไว้แล้วก็ตาม
ทำไมถึงเกิดปัญหา
ทำไมถึงไม่คิดว่าปัญหาอยู่ที่ min-height
1.ไม่ค่อยมีคนรู้จัก- เอกสารส่วนใหญ่ไม่ได้เน้นเรื่องmin-height: auto
2.คิดว่า flex: 1 พอแล้ว- หลายคนคิดว่าflex: 1ควรทำให้ยืดหดได้เอง
3.ไม่มี error message- เพียงแค่ทะลุออกมา ไม่มีข้อความบอกว่าผิดตรงไหน
4.เฉพาะ nested flex- ถ้าไม่ซ้อนหลายชั้น ปัญหาไม่เกิด
วิธีแก้ปัญหา
หลักการแก้ไข Override ค่า default ด้วย minHeight: 0 เพื่อบอกว่า: "ยอมเล็กได้ถึง 0px - ให้ถูกจำกัดขนาดโดย parent แทนที่จะขยายตาม content"
ตัวอย่างโค้ดที่แก้ไขแล้ว
ตัวอย่างการตัดสินใจ
กรณี Mixed Flex Directions
เมื่อมีทั้ง row และ column ผสมกัน:
กฎสำคัญ: มองที่ flexDirection ของ parent ไม่ใช่ตัว element เอง