Chrome / Safari ไม่เติมเต็มความสูงของเฟล็กซ์พล็อต

235

ฉันต้องการมีเมนูแนวตั้งที่มีความสูงเฉพาะ

เด็กแต่ละคนต้องเติมความสูงของผู้ปกครองและมีข้อความที่อยู่ตรงกลาง

จำนวนลูกเป็นแบบสุ่มดังนั้นฉันต้องทำงานกับค่าแบบไดนามิก

Div .containerมีจำนวนลูกที่สุ่ม ( .item) ที่จะต้องเติมความสูงของพาเรนต์เสมอ เพื่อให้บรรลุว่าฉันใช้ flexbox

สำหรับการสร้างลิงก์ที่มีข้อความตรงกลางฉันใช้display: table-cellเทคนิค แต่การใช้ตารางแสดงผลต้องใช้ความสูง 100%

ปัญหาของฉัน.item-inner { height: 100% }คือไม่ทำงานใน webkit (Chrome)

มีการแก้ไขสำหรับปัญหานี้หรือไม่?
หรือมีเทคนิคที่แตกต่างกันในการ.itemเติมเต็มความสูงของผู้ปกครองด้วยข้อความแนวตั้งที่ตรงกลาง

ตัวอย่างที่นี่ jsFiddle ควรดูใน Firefox และ Chrome

.container {
  height: 20em;
  display: flex;
  flex-direction: column;
  border: 5px solid black
}
.item {
  flex: 1;
  border-bottom: 1px solid white;
}
.item-inner {
  height: 100%;
  width: 100%;
  display: table;
}
a {
  background: orange;
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>

ขยายตัวอย่างข้อมูล

— Ricardo Castañeda
แหล่งที่มา

1

ตอนนี้ได้รับการแก้ไขแล้ว - bugs.chromium.org/p/chromium/issues/detail?id=426898

— vsync

3

สิ่งนี้ไม่เกี่ยวข้องกับ OP โดยเฉพาะ แต่อาจเกี่ยวข้องกับ googler ที่ลงจอดที่นี่สำหรับ "ซาฟารีแสดงความสูงสัมบูรณ์ 100% ไม่ทำงาน" หรือบางอย่างที่คล้ายกัน ฉันมีองค์ประกอบเช่นนี้อยู่ในที่เก็บแบบยืดหยุ่นและต้องระบุtop:0และleft:0ทำให้ปรากฏตามที่คาดไว้

— AlexMA

1

@vsync ยังไม่ได้รับการแก้ไข: stackoverflow.com/questions/46226298/…

— TylerH

408

สารละลาย

ใช้เฟล็กซ์เฟล็กคอนเทนเนอร์

กำจัดเปอร์เซ็นต์ความสูง กำจัดคุณสมบัติของตาราง vertical-alignกำจัด หลีกเลี่ยงการวางตำแหน่งที่แน่นอน เพียงติดกับ flexbox ตลอดทาง

นำdisplay: flexไปใช้กับรายการ flex ( .item) ทำให้มันเป็นภาชนะบรรจุแบบยืดหยุ่น สิ่งนี้จะตั้งค่าโดยอัตโนมัติalign-items: stretchซึ่งบอกลูก ( .item-inner) เพื่อขยายความสูงเต็มของพาเรนต์

สำคัญ: ลบความสูงที่ระบุออกจากไอเท็มเฟล็กเพื่อให้วิธีนี้ใช้งานได้ หากเด็กมีความสูงที่ระบุ (เช่นheight: 100%) มันจะไม่สนใจการalign-items: stretchมาจากผู้ปกครอง สำหรับstretchค่าเริ่มต้นในการทำงานความสูงของเด็กจะต้องคำนวณauto (คำอธิบายแบบเต็ม )

ลองใช้ (ไม่มีการเปลี่ยนแปลง HTML):

แสดงตัวอย่างโค้ด

.container {
    display: flex;
    flex-direction: column;
    height: 20em;
    border: 5px solid black
}

.item {
    display: flex;                      /* new; nested flex container */
    flex: 1;
    border-bottom: 1px solid white;
}

.item-inner {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */

    /* height: 100%;                    <-- remove; unnecessary */
    /* width: 100%;                     <-- remove; unnecessary */
    /* display: table;                  <-- remove; unnecessary */  
}

a {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */
    align-items: center;                /* new; vertically center text */
    background: orange;

    /* display: table-cell;             <-- remove; unnecessary */
    /* vertical-align: middle;          <-- remove; unnecessary */
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>

ขยายตัวอย่างข้อมูล

การสาธิต jsFiddle

คำอธิบาย

ปัญหาของฉัน.item-inner { height: 100% }คือไม่ทำงานใน webkit (Chrome)

มันไม่ทำงานเพราะคุณใช้เปอร์เซ็นต์ความสูงในวิธีที่ไม่สอดคล้องกับการนำข้อมูลจำเพาะไปใช้

10.5 ความสูงของเนื้อหา: heightคุณสมบัติ

ร้อยละ
ระบุความสูงร้อยละ เปอร์เซ็นต์จะถูกคำนวณตามความสูงของบล็อกที่มีกล่องที่สร้างขึ้น autoถ้าความสูงของตึกมีที่ไม่ได้ระบุไว้อย่างชัดเจนและองค์ประกอบนี้จะไม่ได้ตำแหน่งอย่างนั้นคำนวณค่า

อัตโนมัติ
ความสูงขึ้นอยู่กับค่าของคุณสมบัติอื่น ๆ

กล่าวอีกนัยหนึ่งสำหรับความสูงร้อยละที่จะทำงานกับเด็กในการไหลผู้ปกครองจะต้องมีความสูงที่กำหนด

ในรหัสของคุณคอนเทนเนอร์ระดับบนสุดมีความสูงที่กำหนด: .container { height: 20em; }

คอนเทนเนอร์ระดับที่สามมีความสูงที่กำหนด: .item-inner { height: 100%; }

แต่ระหว่างนั้นคอนเทนเนอร์ระดับที่สอง - .item- ไม่มีความสูงที่กำหนด Webkit เห็นว่าเป็นลิงค์ที่ขาดหายไป

.item-innerจะบอก Chrome: ให้ฉัน height: 100%Chrome มองไปที่ parent ( .item) เพื่อการอ้างอิงและตอบสนอง: 100% ของอะไร? ฉันไม่เห็นอะไรเลย (ไม่สนใจflex: 1กฎที่มี) เป็นผลให้มันใช้height: auto(ความสูงของเนื้อหา) ตามข้อกำหนด

Firefox ในขณะนี้ยอมรับความสูงเฟล็กซ์ของผู้ปกครองเป็นการอ้างอิงสำหรับความสูงร้อยละของเด็ก IE11 และ Edge ยอมรับความยืดหยุ่นสูงเช่นกัน

นอกจากนี้ Chrome จะยอมรับflex-growการอ้างอิงหลักอย่างเพียงพอหากใช้ร่วมกับflex-basis (ค่าตัวเลขใด ๆ ที่ใช้งานได้ ( autoจะไม่) รวมถึงflex-basis: 0) อย่างไรก็ตามจากการเขียนนี้การแก้ปัญหานี้ล้มเหลวใน Safari

แสดงตัวอย่างโค้ด

#outer {
  display: flex;
  flex-direction: column;
  height: 300px;
  background-color: white;
  border: 1px solid red;
}
#middle {
  flex-grow: 1;
  flex-basis: 1px;
  background-color: yellow;
}
#inner {
  height: 100%;
  background-color: lightgreen;
}

<div id="outer">
  <div id="middle">
    <div id="inner">
      INNER
    </div>
  </div>
</div>

ขยายตัวอย่างข้อมูล

โฟร์โซลูชั่น

1. ระบุความสูงขององค์ประกอบหลักทั้งหมด

โซลูชันข้ามเบราว์เซอร์ที่เชื่อถือได้คือการระบุความสูงขององค์ประกอบหลักทั้งหมด การทำเช่นนี้จะป้องกันการเชื่อมโยงที่ขาดหายไปซึ่งเบราว์เซอร์ที่ใช้ Webkit จะพิจารณาการละเมิดข้อกำหนด

โปรดทราบว่าmin-heightและmax-heightไม่สามารถยอมรับได้ มันจะต้องเป็นheightทรัพย์สิน

รายละเอียดเพิ่มเติมได้ที่นี่: การทำงานกับheightคุณสมบัติCSS และค่าเปอร์เซ็นต์

2. CSS ความสัมพันธ์ & การกำหนดตำแหน่งแบบสัมบูรณ์

นำposition: relativeไปใช้กับผู้ปกครองและposition: absoluteกับเด็ก

ขนาดเด็กที่มีheight: 100%และหรือใช้คุณสมบัติชดเชย:width: 100% , , ,top: 0right: 0bottom: 0left: 0

ด้วยการกำหนดตำแหน่งที่แน่นอนเปอร์เซ็นต์ความสูงจะทำงานโดยไม่มีความสูงที่ระบุบนพาเรนต์

3. ลบคอนเทนเนอร์ HTML ที่ไม่จำเป็น (แนะนำ)

จำเป็นต้องมีตู้คอนเทนเนอร์สองตู้buttonหรือไม่? ทำไมไม่ลบ.itemหรือ.item-innerหรือทั้งสองอย่าง แม้ว่าbuttonองค์ประกอบบางครั้งจะล้มเหลวในฐานะภาชนะบรรจุแบบยืดหยุ่นแต่ก็อาจเป็นรายการที่ยืดหยุ่นได้ พิจารณาสร้างbuttonเด็ก.containerหรือหรือ.itemลบมาร์คฟรี

นี่คือตัวอย่าง:

แสดงตัวอย่างโค้ด

.container {
    height: 20em;
    display: flex;
    flex-direction: column;
    border: 5px solid black
}

a {
    flex: 1;
    background: orange;
    border-bottom: 1px solid white;
    display: flex;                   /* nested flex container (for aligning text) */
    align-items: center;             /* center text vertically */
    justify-content: center;         /* center text horizontally */
}

<div class="container">
    <a>Button</a>
    <a>Button</a>
    <a>Button</a>
</div>

ขยายตัวอย่างข้อมูล

4. ภาชนะบรรจุแบบซ้อน (แนะนำ)

กำจัดเปอร์เซ็นต์ความสูง กำจัดคุณสมบัติของตาราง vertical-alignกำจัด หลีกเลี่ยงการวางตำแหน่งที่แน่นอน เพียงติดกับ flexbox ตลอดทาง

นำdisplay: flexไปใช้กับรายการ flex ( .item) ทำให้มันเป็นภาชนะบรรจุแบบยืดหยุ่น สิ่งนี้จะตั้งค่าโดยอัตโนมัติalign-items: stretchซึ่งบอกลูก ( .item-inner) เพื่อขยายความสูงเต็มของพาเรนต์

สำคัญ: ลบความสูงที่ระบุออกจากไอเท็มเฟล็กเพื่อให้วิธีนี้ใช้งานได้ หากเด็กมีความสูงที่ระบุ (เช่นheight: 100%) มันจะไม่สนใจการalign-items: stretchมาจากผู้ปกครอง สำหรับstretchค่าเริ่มต้นในการทำงานความสูงของเด็กจะต้องคำนวณauto (คำอธิบายแบบเต็ม )

ลองใช้ (ไม่มีการเปลี่ยนแปลง HTML):

แสดงตัวอย่างโค้ด

.container {
    display: flex;
    flex-direction: column;
    height: 20em;
    border: 5px solid black
}

.item {
    display: flex;                      /* new; nested flex container */
    flex: 1;
    border-bottom: 1px solid white;
}

.item-inner {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */

    /* height: 100%;                    <-- remove; unnecessary */
    /* width: 100%;                     <-- remove; unnecessary */
    /* display: table;                  <-- remove; unnecessary */  
}

a {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */
    align-items: center;                /* new; vertically center text */
    background: orange;

    /* display: table-cell;             <-- remove; unnecessary */
    /* vertical-align: middle;          <-- remove; unnecessary */
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>

ขยายตัวอย่างข้อมูล

jsFiddle

— Michael Benjamin
แหล่งที่มา

3

ฉันแก้ไขปัญหาโดยใช้ความสูง: อัตโนมัติ

— Alfrex92

เพียงคำพูดที่นำมาจากลิงก์คำอธิบายของโพสต์ที่ยอดเยี่ยมนี้ - "จัดเรียงรายการ: ยืด" ทำให้เด็กดิ้นเพื่อขยายข้ามแกนข้ามของภาชนะบรรจุ - นั่นคือการยืดเด็กให้สูงที่สุดคอนเทนเนอร์ flex ควรมีทิศทางงอ เป็นแถว

— littlewhywhat

3

ฉันสามารถยืนยันได้ว่าการใช้เฟล็กคอนเทนเนอร์แบบซ้อนทำงานได้ดีที่สุด เราใช้ flexbox อย่างไม่ต่อเนื่องในเมนูของเรา แทนที่จะใช้ flex: 1 และ display: flex บนพาเรนต์คอนเทนเนอร์เราใช้ความสูง: 100% ในบางแห่ง ทุกอย่างทำงานอย่างที่คาดไว้หลังจากเราเปลี่ยนคำจำกัดความที่เกี่ยวข้อง ขอบคุณ @Michael_B สำหรับคำใบ้! :)

— flocbit

1

@ JamesHarrington, CSS เติบโตขึ้นตามกาลเวลาและมีความซับซ้อน ;-)

— DerMike

แต่ละคำตอบควรเป็นคำตอบที่แตกต่างกัน ฉันจะลงคะแนนในโซลูชันที่เฉพาะเจาะจงด้วยวิธีนี้ได้อย่างไร

— Jp_

14

การแก้ไข: ลบheight: 100%ใน.item-ภายในและเพิ่มdisplay: flexใน.item

การสาธิต: https://codepen.io/tronghiep92/pen/NvzVoo

— nghiepit
แหล่งที่มา

ขอบคุณสิ่งนี้ช่วยฉัน เด็กที่มีความยืดหยุ่นจะยืดเส้นยืดความสูงของภาชนะโดยอัตโนมัติหรือไม่? นี่เป็นสาเหตุที่ใช้งานได้หรือไม่

— Reece Kenney

@ReeceKenney ใช่สำหรับคำถามของคุณ นี่คือคำอธิบายในคำตอบของฉัน ดูโซลูชัน # 4

— Michael Benjamin

10

การระบุแอ็ตทริบิวต์ flex ไปยังคอนเทนเนอร์ใช้งานได้สำหรับฉัน:

.container {
    flex: 0 0 auto;
}

สิ่งนี้ทำให้มั่นใจได้ว่ามีการตั้งค่าความสูงและไม่เติบโต

— huseyin39
แหล่งที่มา

6

สำหรับมือถือ Safari มีการแก้ไขเบราว์เซอร์ คุณต้องเพิ่ม-webkit-boxสำหรับอุปกรณ์ iOS

อดีต

display: flex;
display: -webkit-box;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
align-items: stretch;

หากคุณกำลังใช้align-items: stretch;คุณสมบัติสำหรับองค์ประกอบหลักให้ลบheight : 100%องค์ประกอบย่อยออก

— Narasinghe
แหล่งที่มา

2

ฉันมีปัญหาที่คล้ายกันใน iOS 8, 9 และ 10 และข้อมูลข้างต้นไม่สามารถแก้ไขได้ แต่ฉันค้นพบวิธีแก้ไขหลังจากทำงานมาทั้งวันแล้ว ได้รับมันจะไม่ทำงานสำหรับทุกคน แต่ในกรณีของฉันรายการของฉันถูกซ้อนกันในคอลัมน์และมีความสูง 0 เมื่อมันควรจะเป็นความสูงของเนื้อหา การสลับ css เป็น row และ wrap แก้ไขปัญหา ใช้งานได้เฉพาะถ้าคุณมีรายการเดียวและมีการซ้อนกัน แต่เนื่องจากฉันใช้เวลาทั้งวันเพื่อค้นหาสิ่งนี้ฉันคิดว่าฉันควรแชร์การแก้ไขของฉัน!

.wrapper {
    flex-direction: column; // <-- Remove this line
    flex-direction: row; // <-- replace it with
    flex-wrap: wrap; // <-- Add wrapping
}

.item {
    width: 100%;
}

— Designer023
แหล่งที่มา

0

ฉันมีข้อบกพร่องที่คล้ายกัน แต่ในขณะที่ใช้หมายเลขคงที่สำหรับความสูงและไม่ได้เป็นร้อยละ มันยังเป็นภาชนะบรรจุแบบยืดหยุ่นภายในร่างกาย (ซึ่งไม่มีความสูงที่ระบุ) ปรากฏว่าบน Safari, flex container ของฉันมีความสูง 9px ด้วยเหตุผลบางอย่าง แต่ในเบราว์เซอร์อื่น ๆ ทั้งหมดนั้นแสดงความสูง 100px ที่ถูกต้องที่ระบุในสไตล์ชีท

ฉันจัดการเพื่อให้มันทำงานได้โดยการเพิ่มทั้งheightและmin-heightคุณสมบัติให้กับคลาส CSS

สิ่งต่อไปนี้ใช้ได้กับฉันทั้งบน Safari 13.0.4 และ Chrome 79.0.3945.130:

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100px;
  height: 100px;
}

หวังว่านี่จะช่วยได้!

— Carlton Lindsay
แหล่งที่มา