Trẻ em Flexbox tràn phụ huynh với chiều cao tối đa được chỉ định trên IE

Question

Tôi có một phần tử cha có chứa hai phần tử con được hiển thị trên đầu trang của nhau bằng cách sử dụng flexbox. Phần tử gốc này có thuộc tính chiều cao tối đa được đặt thành một giá trị nhất định. Vì vậy, miễn là nội dung ngắn, yếu tố gốc được cho là vẫn nhỏ và khi nội dung phát triển, phần tử gốc sẽ tăng lên cho đến khi đạt đến chiều cao tối đa. Tại thời điểm này, chúng ta sẽ thấy thanh cuộn trên phần tử nội dung.

#container { 
 
    display: flex; 
 
    max-width: 80vw; 
 
    max-height: 100px; 
 
    flex-direction: column; 
 
} 
 

 
#content { 
 
    overflow-y: auto; 
 
} 
 

 
/* styling - ignore */ 
 
#container { 
 
    border: 2px solid black; 
 
    margin-bottom: 1em; 
 
} 
 
#header { 
 
    background-color: rgb(245, 245, 245); 
 
    padding: 10px; 
 
} 
 
#content { 
 
    background-color: rgb(255, 255, 255); 
 
    padding: 0 10px; 
 
}

<div id="container"> 
 
    <div id="header">Header</div> 
 
    <div id="content"> 
 
    <p>Everything works as supposed to, move along</p> 
 
    </div> 
 
</div> 
 

 
<div id="container"> 
 
    <div id="header">Header</div> 
 
    <div id="content"> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    </div> 
 
</div>

này hoạt động hoàn hảo trên Firefox và Chrome. Trên Internet Explorer, mặc dù các thanh cuộn trong phần tử nội dung không được hiển thị; thay vào đó, phần tử nội dung tràn từ phần tử gốc.

Tôi đã cố gắng để chơi xung quanh với flex-cơ sở và các thuộc tính flexbox khác, googled rất nhiều, nhưng không có bất kỳ may mắn.

Answer 1

thử chiều cao: 100px thay vì chiều cao tối đa: 100px; trên #container, ví dụ:

#container { 
    display: flex; 
    max-width: 80vw; 
    height: 100px; 
    flex-direction: column; 
} 

#container { 
 
    display: flex; 
 
    max-width: 80vw; 
 
    height: 100px; 
 
    flex-direction: column; 
 
} 
 

 
#content { 
 
    overflow-y: auto; 
 
} 
 

 
/* styling - ignore */ 
 
#container { 
 
    border: 2px solid black; 
 
    margin-bottom: 1em; 
 
} 
 
#header { 
 
    background-color: rgb(245, 245, 245); 
 
    padding: 10px; 
 
} 
 
#content { 
 
    background-color: rgb(255, 255, 255); 
 
    padding: 0 10px; 
 
}

<div id="container"> 
 
    <div id="header">Header</div> 
 
    <div id="content"> 
 
    <p>Everything works as supposed to, move along</p> 
 
    </div> 
 
</div> 
 

 
<div id="container"> 
 
    <div id="header">Header</div> 
 
    <div id="content"> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    <p>Very long content</p> 
 
    </div> 
 
</div>