Hàng Flexbox: Làm cách nào để kéo dài trẻ em để lấp đầy trục chéo?

Question

Tôi có một flexbox trái-phải:

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    width: 100%; 
 
    height: 70vh; 
 
    min-height: 325px; 
 
    max-height:570px; 
 
}

<div class="wrapper"> 
 
    <div class="left">Left</div> 
 
    <div class="right">Right</div> 
 
</div>

Vấn đề là con phải là không hành xử một cách đáp ứng. Để cụ thể, tôi muốn nó lấp đầy chiều cao của trình bao bọc. Làm thế nào để thực hiện điều này?

Cảm ơn, Debbie

Answer 1

• Những đứa trẻ của một container hàng-flexbox tự động lấp đầy không gian dọc của container.

• Chỉ định flex: 1; cho một đứa trẻ nếu bạn muốn nó để lấp đầy khoảng trống ngang còn lại:

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    width: 100%; 
 
    height: 5em; 
 
    background: #ccc; 
 
} 
 
.wrapper > .left 
 
{ 
 
    background: #fcc; 
 
} 
 
.wrapper > .right 
 
{ 
 
    background: #ccf; 
 
    flex: 1; 
 
}

<div class="wrapper"> 
 
    <div class="left">Left</div> 
 
    <div class="right">Right</div> 
 
</div>

• Chỉ định flex: 1; cho cả trẻ em nếu bạn muốn họ để lấp đầy số lượng bằng nhau của không gian ngang:

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    width: 100%; 
 
    height: 5em; 
 
    background: #ccc; 
 
} 
 
.wrapper > div 
 
{ 
 
    flex: 1; 
 
} 
 
.wrapper > .left 
 
{ 
 
    background: #fcc; 
 
} 
 
.wrapper > .right 
 
{ 
 
    background: #ccf; 
 
}

<div class="wrapper"> 
 
    <div class="left">Left</div> 
 
    <div class="right">Right</div> 
 
</div>

Answer 2

nó điền vào chiều cao của wrapper! tôi đã thử nghiệm nó trong Chrome và Firefox và không có vấn đề gì. có thể bạn đã đơn giản hóa mã của mình quá nhiều. bạn có thể kiểm tra điều này bằng cách đặt background-color cho trẻ em hoặc đặt align-items: center trong trình bao bọc.