เหตุใดจึงไม่ทำงอรายการที่ย่อขนาดเนื้อหาที่ผ่านมา

ฉันมี 4 flexbox column และทุกอย่างทำงานได้ดี แต่เมื่อฉันเพิ่มข้อความลงในคอลัมน์และตั้งเป็นขนาดตัวอักษรขนาดใหญ่มันทำให้คอลัมน์กว้างกว่าที่ควรจะเป็นเนื่องจากคุณสมบัติ flex

ฉันพยายามใช้word-break: break-wordและช่วย แต่เมื่อฉันปรับขนาดคอลัมน์เป็นความกว้างขนาดเล็กมากตัวอักษรในข้อความจะถูกแบ่งออกเป็นหลายบรรทัด (หนึ่งตัวอักษรต่อบรรทัด) แต่คอลัมน์นั้นไม่ได้รับความกว้างที่เล็กกว่าขนาดตัวอักษรหนึ่งตัว .

ดูวิดีโอนี้ (ในตอนแรกคอลัมน์แรกมีขนาดเล็กที่สุด แต่เมื่อฉันปรับขนาดหน้าต่างมันเป็นคอลัมน์ที่กว้างที่สุดฉันแค่ต้องการเคารพการตั้งค่าเฟล็กต์เสมอขนาดเฟล็กต์ 1: 3: 4: 4)

ฉันรู้ว่าการตั้งค่าขนาดตัวอักษรและการเว้นช่องว่างเล็กลงจะช่วยได้ ... แต่มีวิธีแก้ไขปัญหาอื่นอีกหรือไม่

overflow-x: hiddenฉันไม่สามารถใช้

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

ขนาดขั้นต่ำอัตโนมัติของรายการยืดหยุ่น

คุณกำลังเผชิญหน้ากับการตั้งค่าเริ่มต้นของ flexbox

ไอเท็มเฟล็กต์ต้องไม่เล็กกว่าขนาดเนื้อหาตามแกนหลัก

ค่าเริ่มต้นคือ ...

• min-width: auto
• min-height: auto

... สำหรับรายการยืดหยุ่นในทิศทางแถวและทิศทางคอลัมน์ตามลำดับ

คุณสามารถแทนที่ค่าเริ่มต้นเหล่านี้ได้โดยการตั้งค่าไอเท็มแบบยืดหยุ่นเป็น

• min-width: 0
• min-height: 0
• overflow: hidden(หรือค่าอื่น ๆ ยกเว้นvisible)

ข้อกำหนดของ Flexbox

4.5 ขนาดขั้นต่ำอัตโนมัติของรายการที่ยืดหยุ่น

เพื่อให้ขนาดขั้นต่ำเริ่มต้นที่สมเหตุสมผลมากขึ้นสำหรับรายการ flex ข้อมูลจำเพาะนี้จะแนะนำautoค่าใหม่เป็นค่าเริ่มต้นของmin-widthและmin-heightคุณสมบัติที่กำหนดใน CSS 2.1

เกี่ยวกับautoคุณค่า ...

ในรายการเฟล็กซ์ซึ่งoverflowเป็นvisibleในแกนหลักเมื่อระบุไว้ในคุณสมบัติหลักแกนนาทีขนาดรายการดิ้นของระบุขนาดต่ำสุดอัตโนมัติ 0มันเป็นอย่างอื่นในการคำนวณ

ในคำอื่น ๆ :

• min-width: autoและmin-height: autoค่าเริ่มต้นใช้เฉพาะเมื่อเป็นoverflowvisible
• ถ้าoverflowค่าไม่ได้visible, 0มูลค่าของทรัพย์สินนาทีขนาดคือ
• จึงoverflow: hiddenสามารถทดแทนหาและmin-width: 0min-height: 0

และ...

• อัลกอริธึมการปรับขนาดต่ำสุดใช้เฉพาะในแกนหลักเท่านั้น
• ตัวอย่างเช่นรายการ flex ในคอนเทนเนอร์ทิศทางแถวจะไม่ได้รับmin-height: autoตามค่าเริ่มต้น
• สำหรับคำอธิบายโดยละเอียดเพิ่มเติมดูโพสต์นี้:
  • การเรนเดอร์ min-width แตกต่างกันในทิศทางเฟล็กซ์: คอลัมน์และทิศทางเฟล็กซ์

คุณได้ใช้ความกว้างขั้นต่ำ: 0 และรายการยังไม่ย่อ

กล่องบรรจุ Flex แบบซ้อน

หากคุณกำลังจัดการกับไอเท็มแบบยืดหยุ่นในโครงสร้าง HTML หลายระดับคุณอาจจำเป็นต้องแทนที่ค่าเริ่มต้นmin-width: auto/ min-height: autoรายการที่ระดับสูงกว่า

โดยทั่วไประดับที่สูงขึ้นรายการดิ้นกับสามารถป้องกันการหดตัวในรายการซ้อนกันด้านล่างด้วยmin-width: automin-width: 0

ตัวอย่าง:

• รายการแบบยืดหยุ่นไม่หดเล็กกว่าเนื้อหา
• เหมาะสมกับเด็กเป็นผู้ปกครอง
• คุณสมบัติ css white-space กำลังสร้างปัญหาเกี่ยวกับ flex

เบราว์เซอร์บันทึกการแสดงผล

• Chrome vs. Firefox / Edge

  อย่างน้อยตั้งแต่ปี 2017 ปรากฏว่า Chrome เป็น (1) ย้อนกลับไปที่min-width: 0/ min-height: 0ค่าเริ่มต้นหรือ (2) ใช้0ค่าเริ่มต้นในสถานการณ์ที่ขึ้นอยู่กับอัลกอริทึมลึกลับโดยอัตโนมัติ (นี่อาจเป็นสิ่งที่พวกเขาเรียกว่าการแทรกแซง ) ด้วยเหตุนี้หลายคนเห็นรูปแบบ (โดยเฉพาะแถบเลื่อนที่ต้องการ) ทำงานได้ตามที่คาดหวังใน Chrome แต่ไม่ใช่ใน Firefox / Edge ปัญหานี้ได้รับการกล่าวถึงในรายละเอียดเพิ่มเติมที่นี่: ความคลาดเคลื่อนที่ยืดหยุ่นระหว่าง Firefox และ Chrome

• IE11

  ตามที่ระบุไว้ในข้อมูลจำเพาะautoค่าสำหรับmin-widthและmin-heightคุณสมบัติคือ "ใหม่" ซึ่งหมายความว่าเบราว์เซอร์บางส่วนยังคงอาจทำให้0ค่าตามค่าเริ่มต้นเพราะพวกเขาดำเนินการรูปแบบดิ้นก่อนค่าที่ได้รับการปรับปรุงและเนื่องจาก0เป็นค่าเริ่มต้นสำหรับmin-widthและmin-heightในCSS 2.1 เบราว์เซอร์หนึ่งตัวนั้นคือ IE11 เบราว์เซอร์อื่น ๆ ได้รับการปรับปรุงใหม่autoมูลค่าตามที่กำหนดไว้ในข้อมูลจำเพาะ flexbox

ปรับปรุงการสาธิต

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

jsFiddle