Văn bản trong một thùng chứa flex không bao bọc trong IE11

Hãy xem xét đoạn trích sau:

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Trong Chrome, văn bản được gói như mong đợi:

Nhưng, trong IE11, văn bản không bao bọc :

Đây có phải là một lỗi đã biết trong IE? (nếu có, một con trỏ sẽ được đánh giá cao)

Có một cách giải quyết được biết đến?

Câu hỏi tương tự này không có câu trả lời chắc chắn và một con trỏ chính thức.

Thêm mã này vào mã của bạn:

.child { width: 100%; }

Chúng tôi biết rằng một đứa trẻ ở cấp độ khối được cho là chiếm toàn bộ chiều rộng của cha mẹ.

Chrome hiểu điều này.

IE11, vì bất kỳ lý do gì, muốn một yêu cầu rõ ràng.

Sử dụng flex-basis: 100%hoặc flex: 1cũng hoạt động.

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  width: calc(100% - 2px);       /* NEW; used calc to adjust for parent borders */
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Lưu ý: Đôi khi, cần phải sắp xếp qua các cấp khác nhau của cấu trúc HTML để xác định chính xác vùng chứa nào width: 100%. CSS bọc văn bản không hoạt động trong IE

Tôi có cùng một vấn đề và vấn đề là phần tử không thích ứng với chiều rộng của nó với container.

Thay vì sử dụng width:100%, hãy nhất quán (không trộn lẫn mô hình nổi và mô hình flex) và sử dụng flex bằng cách thêm:

.child { align-self: stretch; }

Hoặc là:

.parent { align-items: stretch; }

Điều này làm việc cho tôi.

Như Tyler đã đề xuất trong một trong những ý kiến ​​ở đây, sử dụng

max-width: 100%;

về đứa trẻ có thể làm việc (làm việc cho tôi). Sử dụng align-self: stretchchỉ hoạt động nếu bạn không sử dụng align-items: center(mà tôi đã làm). width: 100%chỉ hoạt động nếu bạn không có nhiều trẻ em trong hộp linh hoạt mà bạn muốn hiển thị cạnh nhau.

Xin chào tôi đã phải áp dụng chiều rộng 100% cho phần tử ông bà của nó. Không phải yếu tố con của nó.

.grandparent {
    float:left;
    clear: both;
    width:100%; //fix for IE11 text overflow
}

.parent {
    display: flex;
    border: 1px solid red;
    align-items: center;
}

.child {
    border: 1px solid blue;
}

Bằng cách nào đó tất cả các giải pháp này đã không làm việc cho tôi. Rõ ràng có một lỗi IE trongflex-direction:column .

Tôi chỉ làm cho nó hoạt động sau khi gỡ bỏ flex-direction:

flex-wrap: wrap;
align-items: center;
align-content: center;

Các giải pháp được đề xuất không giúp tôi với ".child {width: 100%;}", vì tôi có đánh dấu phức tạp hơn. Tuy nhiên, tôi đã tìm thấy một giải pháp - loại bỏ "align-items: centre;" và nó cũng hoạt động cho trường hợp này.

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  /*align-items: center;*/
}
.child {
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Cách duy nhất tôi có 100% nhất quán có thể tránh được lỗi cột hướng uốn này là sử dụng truy vấn phương tiện có độ rộng tối thiểu để gán độ rộng tối đa cho phần tử con trên màn hình có kích thước màn hình.

.parent {
    display: flex;
    flex-direction: column;
}

//a media query targeting desktop sort of sized screens
@media screen and (min-width: 980px) {
    .child {
        display: block;
        max-width: 500px;//maximimum width of the element on a desktop sized screen
    }
}

Bạn sẽ cần phải đặt các phần tử con nội tuyến tự nhiên (ví dụ: <span>hoặc <a>) thành một thứ khác ngoài nội tuyến (chủ yếu là display: block hoặc display: inline-block) để sửa lỗi hoạt động.

Tôi không tìm thấy giải pháp của mình ở đây, có lẽ ai đó sẽ hữu ích:

.child-with-overflowed-text{
  word-wrap: break-all;
}

Chúc may mắn!

.grandparent{
   display: table;
}

.parent{
  display: table-cell
  vertical-align: middle
}

Điều này làm việc cho tôi.

Tôi cũng vậy, tôi gặp phải vấn đề này.

Thay thế duy nhất là xác định chiều rộng (hoặc chiều rộng tối đa) trong các phần tử con. IE 11 hơi ngu ngốc, và tôi chỉ mất 20 phút để nhận ra giải pháp này.

.parent {
  display: flex;
  flex-direction: column;
  width: 800px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  max-width: 800px;
  @media (max-width:960px){ // <--- Here we go. The text won't wrap ? we will make it break !
    max-width: 600px;
  }
  @media (max-width:600px){
    max-width: 400px;
  }
  @media (max-width:400px){
    max-width: 150px;
  }
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Tôi gặp vấn đề tương tự với hình ảnh tràn trong trình bao bọc flex.

Thêm một flex-basis: 100%;hoặc flex: 1;cho đứa trẻ tràn đầy cố định làm việc cho tôi.

Tại sao sử dụng một giải pháp phức tạp nếu một giải pháp đơn giản cũng làm việc?

.child {
  white-space: normal;
}