Luồng tràn văn bản: dấu ba chấm làm cho mục flex bị tràn vào thùng chứa flex

Question

Tôi có hai cột bên trong một thùng chứa flex. Một trong các cột (cột màu cam) chứa hình đại diện và chiều rộng của nó phải chính xác là 10% của vùng chứa.

Một cột khác (màu xanh dương) chứa bảng điều khiển và tiêu đề của bảng điều khiển có thể rất dài, vì vậy tôi nên cắt ngắn nó qua css. Bức ảnh này cho thấy những gì tôi mong đợi:

Những gì tôi mong đợi:

Nhưng khi tôi đang cố gắng để làm text-overflow: ellipsis, hàng thứ hai của tôi là trở thành rộng hơn so với container flex. Dưới đây là ví dụ về hành vi này:

https://jsfiddle.net/8krtL9ev/1/

.container { 
 
    background: #ddd; 
 
    width: 400px; 
 
    height: 200px; 
 
    padding: 10px; 
 
    display: flex; 
 
} 
 

 
.row1 { 
 
    background: red; 
 
    flex-basis: 10%; 
 
    flex-shrink: 0; 
 
} 
 

 
.row2 { 
 
    background: blue; 
 
    flex-basis: 90%; 
 
    margin-left: 10px; 
 
    padding: 10px; 
 
    display: flex; 
 
} 
 

 
.panel { 
 
    background: green; 
 
    flex-basis: 50%; 
 
    overflow: hidden; 
 
} 
 

 
.panel-title { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="container"> 
 

 
    <div class="row1"> 
 
    </div> 
 

 
    <div class="row2"> 
 
    <div class="panel"> 
 
     <div class="panel-title"> 
 
     <span>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Làm thế nào tôi có thể giải quyết vấn đề này?

Answer 1

Sử dụng width thay cho flex-basis. Bởi vì trong số this Documentation, họ đã đề cập đến

9.9.3. Flex mục Đóng góp Kích Intrinsic

Các chính kích thước min-content/đóng góp tối đa nội dung của một mục flex là ngoài min-content/max-nội dung kích thước của nó, kẹp theo quy mô cơ sở flex nó như tối đa (nếu nó không thể phát triển được) và/hoặc ở mức tối thiểu (nếu nó không phải là co ngót), và sau đó tiếp tục được kẹp theo kích thước chính tối thiểu/tối đa của nó thuộc tính.

Đừng quên để thiết lập chiều rộng calc(90% - 30px) như row2 rộng

.container { 
 
    background: #ddd; 
 
    width: 400px; 
 
    height: 200px; 
 
    padding: 10px; 
 
    display: flex; 
 
} 
 

 
.row1 { 
 
    background: red; 
 
    /* flex-basis: 10%; */ 
 
    width: 10%; 
 
    flex-shrink: 0; 
 
} 
 

 
.row2 { 
 
    background: blue; 
 
    /* flex-basis: 90%; */ 
 
    width: calc(90% - 30px); 
 
    margin-left: 10px; 
 
    padding: 10px; 
 
    display: flex; 
 
} 
 

 
.panel { 
 
    background: green; 
 
    flex-basis: 50%; 
 
    overflow: hidden; 
 
} 
 

 
.panel-title { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="container"> 
 

 
    <div class="row1"> 
 
    </div> 
 

 
    <div class="row2"> 
 
    <div class="panel"> 
 
     <div class="panel-title"> 
 
     <span>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>