ฉันจะทำให้เลย์เอาต์ Flexbox ใช้พื้นที่แนวตั้ง 100% ได้อย่างไร

Question 1

ฉันจะบอกได้อย่างไรว่าแถวเค้าโครง Flexbox ใช้พื้นที่แนวตั้งที่เหลืออยู่ในหน้าต่างเบราว์เซอร์

ฉันมีเลย์เอาต์ flexbox 3 แถว สองแถวแรกมีความสูงคงที่ แต่แถวที่ 3 เป็นแบบไดนามิกและฉันต้องการให้เบราว์เซอร์เติบโตจนเต็มความสูง

ป้อนคำอธิบายภาพที่นี่

ฉันมี flexbox อีกอันในแถวที่ 3 ซึ่งสร้างชุดคอลัมน์ หากต้องการปรับองค์ประกอบภายในคอลัมน์เหล่านี้อย่างถูกต้องฉันต้องการให้พวกเขาเข้าใจความสูงทั้งหมดของเบราว์เซอร์ - สำหรับสิ่งต่างๆเช่นสีพื้นหลังและการจัดแนวรายการที่ฐาน ในที่สุดเค้าโครงหลักจะมีลักษณะดังนี้:

ป้อนคำอธิบายภาพที่นี่

.vwrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    //height: 1000px;
}
.vwrapper #row1 {
    background-color: red;
}
.vwrapper #row2 {
    background-color: blue;
}
.vwrapper #row3 {
    background-color: green;
    flex 1 1 auto;
    display: flex;
}
.vwrapper #row3 #col1 {
    background-color: yellow;
    flex 0 0 240px;
}
.vwrapper #row3 #col2 {
    background-color: orange;
    flex 1 1;
}
.vwrapper #row3 #col3 {
    background-color: purple;
    flex 0 0 240px;
}

<body>
    <div class="vwrapper">
        <div id="row1">
            this is the header
        </div>
        <div id="row2">
            this is the second line
        </div>
        <div id="row3">
            <div id="col1">
                col1
            </div>
            <div id="col2">
                col2
            </div>
            <div id="col3">
                col3
            </div>
        </div>
    </div>
</body>

ขยายข้อมูลโค้ด

ฉันได้พยายามเพิ่มheightแอตทริบิวต์ซึ่งจะทำงานเมื่อฉันตั้งค่าให้เป็นจำนวนมาก 100%แต่ไม่ยากเมื่อฉันตั้งค่าให้ ฉันเข้าใจว่าใช้height: 100%ไม่ได้เพราะเนื้อหาไม่เต็มหน้าต่างเบราว์เซอร์ แต่ฉันสามารถทำซ้ำแนวคิดโดยใช้เลย์เอาต์ Flexbox ได้หรือไม่

Question 2

คุณควรตั้งค่าheightของhtml, body, .wrapperการ100%(เพื่อสืบทอดเต็มความสูง) แล้วก็ตั้งflexมากขึ้นค่ากว่า1ไป.row3และไม่เกี่ยวกับคนอื่น ๆ

.wrapper, html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    background-color: red;
}
#row2 {
    background-color: blue;
}
#row3 {
    background-color: green;
    flex:2;
    display: flex;
}
#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}

<div class="wrapper">
    <div id="row1">this is the header</div>
    <div id="row2">this is the second line</div>
    <div id="row3">
        <div id="col1">col1</div>
        <div id="col2">col2</div>
        <div id="col3">col3</div>
    </div>
</div>

ขยายข้อมูลโค้ด

การสาธิต

Question 3

ตั้งกระดาษห่อให้สูง 100%

.vwrapper {
  display: flex;
  flex-direction: column;

  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;

  height: 100%;
}

และตั้งค่าแถวที่ 3 เป็น flex-grow

#row3 {
   background-color: green;
   flex: 1 1 auto;
   display: flex;
}

การสาธิต

Question 4

ให้ฉันแสดงวิธีอื่นที่ได้ผล 100% ฉันจะเพิ่มช่องว่างภายในสำหรับตัวอย่างด้วย

<div class = "container">
  <div class = "flex-pad-x">
    <div class = "flex-pad-y">
      <div class = "flex-pad-y">
        <div class = "flex-grow-y">
         Content Centered
        </div>
      </div>
    </div>
  </div>
</div>

.container {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
}

  .flex-pad-x {
    padding: 0px 20px;
    height: 100%;
    display: flex;
  }

  .flex-pad-y {
    padding: 20px 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .flex-grow-y {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   }

ดังที่คุณเห็นว่าเราสามารถบรรลุสิ่งนี้ได้ด้วยการควบคุมไม่กี่ตัวในขณะที่ใช้แอตทริบิวต์ flex-grow & flex-direction

1: เมื่อพาเรนต์ "flex-direction" เป็น "row" ลูกของมัน "flex-grow" จะทำงานในแนวนอน 2: เมื่อ "ทิศทางการโค้งงอ" เป็น "คอลัมน์" ลูกของมันจะทำงานในแนวตั้ง

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

แดเนียล