làm thế nào để làm cho flexboxes lồng nhau làm việc

Question

Tôi có một ví dụ nhỏ của một thiết lập flexbox lồng nhau: http://jsfiddle.net/ThomasSpiessens/MUrPj/12/

<div class="box fullSize"> 
    <div class="boxHeader">HEADER</div> 
    <div class="boxContent"> 
     <div class="box fullSize"> 
      <div class="boxHeader moregreen">INNER HEADER</div> 
      <div class="boxContent red">CONTENT CONTENT CONTENT</div> 
      <div class="boxFooter moreblue">INNER FOOTER</div> 
     </div> 
    </div> 
    <div class="boxFooter">FOOTER</div> 
</div> 

Trong ví dụ này, sau đây áp dụng:

• lớp CSS 'chiếc hộp' sử dụng tài sản flexbox trên mà chỉ có boxContent được cho là phát triển. Đối với các thuộc tính và giá trị CSS cụ thể, vui lòng kiểm tra fiddle.
• 'fullSize' chỉ đặt cả chiều rộng và chiều cao thành 100%.

Khi bạn kiểm tra fiddle này với Firefox và Chrome, bạn sẽ nhận được các kết quả khác nhau. Trong Firefox nó làm những gì tôi sẽ cho rằng nó phải làm, đó là kéo dài bên trong .boxContent. Tuy nhiên, trong Chrome, bên trong .boxContent không bị kéo dài.

Có ai có ý tưởng làm cách nào để làm cho nội dung mở rộng trong Chrome không? có lẽ một thuộc tính webkit cụ thể bị thiếu?

Answer 1

Trừ khi bạn cần thêm div đó, hãy xóa nó. Đôi khi có sự khác biệt giữa chiều cao của một phần tử và chiều dài của nó dọc theo trục chính chính (hướng cột), điều này gây ra một số nhầm lẫn ở đây. Về cơ bản, nó trông như nó cao hơn trình duyệt tin rằng nó là, đó là lý do tại sao height: 100% không hoạt động như bạn mong đợi (tôi không chắc chắn hành vi nào là chính xác trong trường hợp này).

Vì bất kỳ lý do gì, hãy quảng bá thành phần tới một thùng chứa flex hoạt động.

http://jsfiddle.net/MUrPj/14/

<div class="box fullSize"> 
    <div class="boxHeader">HEADER</div> 
    <div class="boxContent box"> 
     <div class="boxHeader moregreen">INNER HEADER</div> 
     <div class="boxContent red">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div> 
     <div class="boxFooter moreblue">INNER FOOTER</div> 
    </div> 
    <div class="boxFooter">FOOTER</div> 
</div> 

Answer 2

Tôi đã tìm thấy một giải pháp mà không cần tháo ngoại div.

Bạn cần phải đặt boxContent tương đối vị trí và nó chứa hộp tuyệt đối.

Với gắn một lớp css bổ sung cho các div bên trong:

<div class="boxContent"> 
    <div class="box fullSize innerBox"> 

và css sau:

.boxContent { 
    ... 
    position: relative; 
} 
.innerBox{ 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
} 

đây là jsfiddle Cập nhật: http://jsfiddle.net/MUrPj/223/

Câu hỏi này là khá cũ, nhưng điều này có thể hữu ích cho khách truy cập trong tương lai

Answer 3

Điều này q uestion đã được liên kết cho một vấn đề cụ thể: Làm thế nào để làm cho các yếu tố lồng nhau trong một hộp flex điền vào toàn bộ chiều cao? Câu trả lời ngắn gọn là:

Sử dụng display:flex cho trẻ và tránh height:100%. Đây là simplified example on codepen.

CourtDemone giải thích nó tốt (hơn here):

Theo spec flexbox, giá trị align-self:stretch (mặc định cho một yếu tố flex'd) chỉ thay đổi sử dụng giá trị của chéo của một nguyên tố kích thước tài sản (trong trường hợp này, chiều cao). Tuy nhiên, tỷ lệ phần trăm được tính từ giá trị được chỉ định của thuộc tính kích thước chéo của phụ huynh, chứ không phải giá trị được sử dụng.