Làm cách nào tôi có thể tạo cho trẻ em Flexbox 100% chiều cao của bố mẹ?

Tôi đang cố gắng lấp đầy không gian dọc của vật phẩm flex bên trong 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>

Và đây là JSFiddle

flex-2-child không lấp đầy chiều cao yêu cầu ngoại trừ trong hai trường hợp:

1. flex-2 có chiều cao 100% (điều này thật kỳ lạ vì một mục flex có 100% theo mặc định + đó là lỗi trong Chrome)
2. flex-2-child có một vị trí tuyệt đối mà cũng bất tiện

Điều này hiện không hoạt động trong Chrome hoặc Firefox.

Sử dụng align-items: stretch

Tương tự như câu trả lời của David Store, cách giải quyết của tôi là:

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

Ngoài ra align-items, bạn có thể sử dụng align-selfchỉ trên .flex-2-childmục bạn muốn kéo dài.

Tôi đã trả lời một câu hỏi tương tự ở đây .

Tôi biết bạn đã nói position: absolute;là bất tiện nhưng nó hoạt động. Xem bên dưới để biết thêm thông tin về khắc phục vấn đề thay đổi kích thước.

Cũng xem jsFiddle này để xem bản demo, mặc dù tôi mới chỉ thêm tiền tố webkit để mở trong Chrome.

Về cơ bản bạn có 2 vấn đề mà tôi sẽ giải quyết riêng.

1. Bắt con của một vật phẩm flex để lấp đầy chiều cao 100%
   • Đặt position: relative;trên cha mẹ của đứa trẻ.
   • Đặt position: absolute;lên con.
   • Sau đó, bạn có thể đặt chiều rộng / chiều cao theo yêu cầu (100% trong mẫu của tôi).
2. Sửa lỗi thay đổi kích thước cuộn "quirk" trong Chrome
   • Đặt overflow-y: auto;trên div có thể cuộn.
   • Div có thể cuộn phải có chiều cao rõ ràng được chỉ định. Mẫu của tôi đã có chiều cao 100% nhưng nếu không có mẫu nào được áp dụng, bạn có thể chỉ địnhheight: 0;

Xem câu trả lời này để biết thêm thông tin về vấn đề cuộn.

Nếu tôi hiểu chính xác, bạn muốn flex-2-con lấp đầy chiều cao và chiều rộng của bố mẹ nó, để vùng màu đỏ được bao phủ hoàn toàn bởi màu xanh lá cây?

Nếu vậy, bạn chỉ cần đặt flex-2 để sử dụng flexbox:

.flex-2 {
    display: flex;  
}

Sau đó bảo flex-2-child trở nên linh hoạt:

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

Xem http://jsfiddle.net/2ZDuE/10/

Lý do là flex-2-child không phải là một mục flexbox, mà là cha mẹ của nó.

Tôi cho rằng hành vi của Chrome phù hợp hơn với thông số CSS (mặc dù nó ít trực quan hơn). Theo thông số kỹ thuật của Flexbox, stretchgiá trị mặc định của thuộc align-selftính chỉ thay đổi giá trị được sử dụng của "thuộc tính kích thước chéo" của phần tử ( heighttrong trường hợp này). Và, như tôi hiểu thông số CSS2.1 , chiều cao phần trăm được tính từ giá trị được chỉ định của cha mẹ height, không phải giá trị được sử dụng. Giá trị được chỉ định của cha mẹ heightkhông bị ảnh hưởng bởi bất kỳ thuộc tính flex nào và vẫnauto .

Cài đặt rõ ràng height: 100%giúp chính thức có thể tính chiều cao phần trăm của trẻ, giống như cài đặt height: 100%để htmlcó thể tính chiều cao phần trăm của bodyCSS2.1.

Tôi tự tìm giải pháp, giả sử bạn có CSS ​​bên dưới:

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

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

Trong trường hợp này, cài đặt chiều cao 100% sẽ không hoạt động, vì vậy, những gì tôi làm là đặt margin-bottomquy tắc thành auto, như:

.child {
  margin-bottom: auto;
}

và đứa trẻ sẽ được sắp xếp theo chiều cao nhất của cha mẹ, bạn cũng có thể sử dụng align-selfquy tắc này nếu bạn thích.

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

Một ý tưởng sẽ là display:flex;với flex-direction: row;được lấp đầy containerdiv với .flex-1và .flex-2, nhưng điều đó không có nghĩa là .flex-2có một mặc định height:100%;ngay cả khi nó được mở rộng với chiều cao đầy đủ và có một phần tử con ( .flex-2-child) với height:100%;bạn sẽ cần phải thiết lập các phụ huynh đến height:100%;hoặc sử dụng display:flex;với flex-direction: row;trên.flex-2 div cũng vậy.

Từ những gì tôi biết display:flex sẽ không mở rộng tất cả các yếu tố con của bạn lên 100%.

Một bản demo nhỏ, đã loại bỏ chiều cao từ .flex-2-childvà được sử dụng display:flex;trên .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/

Điều này cũng có thể được giải quyết với align-self: stretch;yếu tố chúng ta muốn được kéo dài.

Đôi khi, chỉ nên kéo dài một mục trong thiết lập 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>

.thùng đựng hàng { . . . . align-item: kéo dài; . . . . }

Đây là giải pháp của tôi bằng cách sử dụng css +

Trước hết, nếu con đầu tiên (flex-1) không nên là 100px. Trong css + trên thực tế, bạn có thể đặt các phần tử linh hoạt và / hoặc tĩnh (cột hoặc hàng) và ví dụ của bạn trở nên dễ dàng như sau:

<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>

container css:

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

và rõ ràng bao gồm css + 0,2 lõi

nghe câu đố