Ngăn chiều cao vật phẩm uốn cong mở rộng để khớp với các vật phẩm linh hoạt khác

Tôi có hai phần tử bên trong một vùng chứa, chúng được đặt cạnh nhau bằng cách sử dụng hộp flex. Trên phần tử thứ hai ( .flexbox-2), tôi đang đặt chiều cao của nó trong CSS. Tuy nhiên, phần tử đầu tiên ( .flexbox-1) sẽ khớp với chiều cao của .flexbox-2. Làm thế nào để tôi dừng .flexbox-1việc khớp với chiều cao .flexbox-2và thay vào đó chỉ giữ lại chiều cao tự nhiên của nó?

Đây là những gì tôi có cho đến nay (cũng có sẵn dưới dạng jsFiddle )

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

Đây là một giải pháp cũ. Câu trả lời của tôi được thay thế bằng câu trả lời mớialign-self này của Aaron . Đó là một giải pháp tốt hơn mà không dựa vào CSS.

Miễn là thùng chứa flex không có chiều cao , bạn có thể đặt height: 0%trên mục flex đầu tiên. Bởi vì nó không có chiều cao để thừa kế từ cha mẹ của nó, bất kỳ phần trăm chiều cao nào cũng sẽ khiến nó bị sụp đổ. Sau đó nó sẽ phát triển với nội dung của nó.

Thí dụ

Trong ví dụ này, tôi đã loại bỏ -webkittiền tố. Nó chỉ thực sự cần thiết cho Safari và tiền tố có thể được thêm vào phía trên phiên bản không có tiền tố. Tôi cũng đã loại bỏ flex-direction: rowvì nó là giá trị mặc định.

.container {
  display: flex;
}
.flexbox-1 {
  flex: 1;  
  height: 0%;  
  border: solid 3px red;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

Tôi biết đây là một câu hỏi cũ nhưng một giải pháp tốt hơn là đặt mục flex để căn chỉnh ở trên cùng bằng cách sử dụng flex-start.

/* Default Styles */
.container {
  display: flex;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}
 .flexbox-1 {
  flex: 1;  
  align-self: flex-start;  
  border: solid 3px red;
}

<div class="container">
  <div class="flexbox-1">"align-self: flex-start;"</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

Bạn có thể dễ dàng khắc phục điều đó bằng cách thêm vào các mục căn chỉnh chính: flex-start;

Đó là tất cả

Đặt heighttrẻ em thành max-contentsẽ ngăn chúng co lại.

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
  height: max-content;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>