ฉันจะทำให้ Flexbox เด็กสูง 100% ของผู้ปกครองได้อย่างไร

ฉันพยายามเติมพื้นที่แนวตั้งของไอเท็มเฟล็กซ์ภายใน Flexbox

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

และนี่คือJSFiddle

flex-2-child ไม่เติมเต็มความสูงที่ต้องการยกเว้นในสองกรณีที่:

1. flex-2 มีความสูง 100% (ซึ่งแปลกเพราะรายการแบบยืดหยุ่นมีค่าเริ่มต้น 100% + เป็นค่าบั๊กใน Chrome)
2. flex-2-child มีตำแหน่งแน่นอนซึ่งไม่สะดวกเช่นกัน

ไม่สามารถใช้งานได้ใน Chrome หรือ Firefox ในขณะนี้

ใช้ align-items: stretch

เช่นเดียวกับคำตอบของ David Storey วิธีแก้ปัญหาของฉันคือ:

.flex-2 {
    display: flex;
    align-items: stretch;
}

หรือalign-itemsคุณสามารถใช้align-selfเฉพาะกับ.flex-2-childรายการที่คุณต้องการยืด

ผมได้ตอบคำถามที่คล้ายกันที่นี่

ฉันรู้ว่าคุณพูดแล้วposition: absolute;ไม่สะดวก แต่ก็ใช้งานได้ ดูด้านล่างสำหรับข้อมูลเพิ่มเติมเกี่ยวกับการแก้ไขปัญหาการปรับขนาด

โปรดดูตัวอย่าง jsFiddleนี้ด้วยแม้ว่าฉันจะเพิ่มเฉพาะส่วนนำของ webkit เพื่อเปิดใน Chrome

โดยทั่วไปคุณมี 2 ประเด็นที่ฉันจะจัดการแยกต่างหาก

1. ทำให้ลูกของชิ้นงานยืดหยุ่นเพื่อเติมเต็มความสูง 100%
   • ตั้งposition: relative;อยู่บนแม่ของเด็ก
   • ตั้งposition: absolute;อยู่บนเด็ก
   • จากนั้นคุณสามารถตั้งค่าความกว้าง / ความสูงได้ตามต้องการ (100% ในตัวอย่างของฉัน)
2. แก้ไข "quirk" การเลื่อนการปรับขนาดใน Chrome
   • ใส่overflow-y: auto;div ที่เลื่อนได้
   • div เลื่อนได้จะต้องมีความสูงที่ระบุไว้อย่างชัดเจน ตัวอย่างของฉันมีความสูง 100% แล้ว แต่หากไม่ได้ใช้เลยคุณสามารถระบุได้height: 0;

ดูคำตอบนี้สำหรับข้อมูลเพิ่มเติมเกี่ยวกับปัญหาการเลื่อน

หากฉันเข้าใจถูกต้องคุณต้องการให้ flex-2-child เติมความสูงและความกว้างของพาเรนต์เพื่อให้พื้นที่สีแดงถูกปกคลุมด้วยสีเขียวอย่างสมบูรณ์หรือไม่

หากเป็นเช่นนั้นคุณต้องตั้งค่า flex-2 ให้ใช้ flexbox:

.flex-2 {
    display: flex;  
}

จากนั้นบอก flex-2-child ให้ยืดหยุ่น:

.flex-2-child {    
    flex: 1;
}

ดูhttp://jsfiddle.net/2ZDuE/10/

เหตุผลคือ flex-2-child ไม่ใช่ไอเท็ม flexbox แต่เป็นพาเรนต์

ฉันคิดว่าพฤติกรรมของ Chrome นั้นสอดคล้องกับข้อกำหนด CSS มากขึ้น (แม้ว่าจะใช้งานง่ายกว่า) ตามข้อมูลจำเพาะของ Flexbox ค่าเริ่มต้นstretchของalign-selfคุณสมบัติจะเปลี่ยนเฉพาะค่าที่ใช้ของ "คุณสมบัติข้ามขนาด" ขององค์ประกอบ ( heightในกรณีนี้) และตามที่ฉันเข้าใจCSS2.1 specเปอร์เซ็นต์ความสูงจะถูกคำนวณจากค่าที่ระบุของผู้ปกครองheightไม่ใช่ค่าที่ใช้ ค่าที่ระบุของผู้ปกครองheightจะไม่ได้รับผลกระทบจากคุณสมบัติยืดหยุ่นใด ๆ และยังคงautoอยู่

การตั้งค่าอย่างชัดเจนheight: 100%ทำให้เป็นไปได้อย่างเป็นทางการในการคำนวณเปอร์เซ็นต์ความสูงของเด็กเช่นเดียวกับการตั้งค่าheight: 100%เพื่อให้htmlสามารถคำนวณความสูงของเปอร์เซ็นต์bodyใน CSS2.1

ฉันพบโซลูชันด้วยตัวเองสมมติว่าคุณมี CSS ด้านล่าง:

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

ในกรณีนี้การตั้งค่าความสูง 100% จะไม่ทำงานดังนั้นสิ่งที่ฉันทำคือการตั้งค่าmargin-bottomกฎเป็นauto:

.child {
  margin-bottom: auto;
}

และเด็กจะได้รับการจัดชิดกับด้านบนสุดของผู้ปกครองคุณยังสามารถใช้align-selfกฎต่อไปได้หากคุณต้องการ

.child {
  align-self: flex-start;
}

แนวคิดก็คือว่าdisplay:flex;ด้วยflex-direction: row;การกรอกcontainerdiv ด้วย.flex-1และ.flex-2แต่ไม่ได้หมายความว่า.flex-2มีค่าเริ่มต้นheight:100%;แม้ว่าจะขยายให้เต็มความสูงและมีองค์ประกอบย่อย ( .flex-2-child) ด้วยheight:100%;คุณจะต้องตั้งค่าแม่height:100%;หรือใช้display:flex;ด้วยflex-direction: row;ใน.flex-2div ด้วย

จากสิ่งที่ฉันรู้display:flexจะไม่ขยายความสูงองค์ประกอบลูกทั้งหมดของคุณเป็น 100%

การสาธิตขนาดเล็กลบความสูงออกจาก.flex-2-childและใช้display:flex;กับ.flex-2: http://jsfiddle.net/2ZDuE/3/

HTML

<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

CSS

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
   flex:1 0 100px;
    background-color: blue;
}
.flex-2 {
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1 0 100%;
    background-color: red;
}
.flex-2-child {
    flex: 1 0 100%;
    height:100%;
    background-color: green;
}

http://jsfiddle.net/2ZDuE/750/

สิ่งนี้สามารถแก้ไขได้ด้วยalign-self: stretch;องค์ประกอบที่เราต้องการยืดออก

บางครั้งมันเป็นความปรารถนาที่จะยืดเพียงหนึ่งรายการในการตั้งค่า flexbox

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  align-self: stretch;
  background-color: red;
}
.flex-2-child {
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

.container {. . . . จัดรายการ: ยืด; . . . . }

นี่คือทางออกของฉันโดยใช้css +

ก่อนอื่นถ้าลูกคนแรก (flex-1) ควรเป็น 100px ไม่ควรดิ้น ในความเป็นจริงcss +คุณสามารถตั้งค่าองค์ประกอบที่ยืดหยุ่นและ / หรือคงที่ (คอลัมน์หรือแถว) และตัวอย่างของคุณกลายเป็นเรื่องง่ายเช่นนี้:

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

ภาชนะ CSS:

.container {
    height: 200px;
    width: 500px;
    position:relative;
}

และแน่นอนรวมถึงcss + 0.2 core

ได้ยินเสียงไวโอลิน