Sử dụng các giá trị phần trăm để điền các mục flexbox

Question

Tôi sử dụng các hộp flexbox trong Google Chrome (chỉ hỗ trợ trình duyệt này) để tạo bố cục động. Tôi đã có các phần tử con n trong một phần tử div nên chia sẻ toàn bộ không gian với tất cả cùng một tỷ lệ. Điều này đang làm việc mà không có vấn đề do các hộp flex mới được giới thiệu. Nhưng tôi cũng phải đặt chiều cao của mỗi div bên trong thành 0. Nếu tôi muốn kéo giãn một phần tử bên trong div này đến 100% chiều cao nó sử dụng giá trị đã cho là 0 thay vì bất kỳ giá trị tính toán nào. Như tôi đã chọn flex-hộp để ngăn chặn bằng cách sử dụng javascript tôi muốn còn lại theo cách đó. Có cách nào khác để làm cho chiều cao của hình ảnh lấp đầy div không?

Và đây là đoạn code (chỉ kiểm tra trong Google Chrome):

html

<div class="flexbox"> 
    <div><img src="chrome-logo.png" /></div> 
    <div><img src="chrome-logo.png" /></div> 
    <div><img src="chrome-logo.png" /></div> 
    <div><img src="chrome-logo.png" /></div> 
</div> 

css

  .flexbox { 
       display:-webkit-box; 
       -webkit-box-orient:vertical; 
       height:300px; 
       width:200px; 
      } 
      .flexbox > div { 
       -webkit-box-flex:1; 
       height:0; 
       border:solid 1px #000000; 
      } 
      .flexbox > div > img { 
       height:100%; 
      } 

The code to watch in the browser

Answer 1

Vâng, tôi đã nhận nó làm việc kể từ giờ nghiên cứu. Những thay đổi sau đây để làm:

.flexbox { 
      display:-webkit-box; 
      -webkit-box-orient:vertical; 
      height:300px; 
      width:200px; 
     } 
     .flexbox > div { 
      -webkit-box-flex:1; 
      height:0; 
      border:solid 1px #000000; 
      position:relative; /* CHANGE */ 
     } 
     .flexbox > div > img { 
      height:100%; 
      position:absolute; /* CHANGE */ 
     } 

Nếu bạn Intrested trong bạn có thể làm cho những thay đổi này qua ChromeDevTools với css và bạn sẽ thấy kết quả ngay!