Làm cho mặt hàng flex có chiều rộng của văn bản

Question

Tôi muốn có bố trí với hai cột, trong đó cột bên trái là một số loại thanh bên.

Bây giờ tôi muốn sử dụng một số văn bản trong thanh bên không nên gói.

Khi tôi làm như vậy nó gây ra một số loại tràn và sau đó sử dụng overflow:hidden giấu một phần tốt của văn bản.

Làm cách nào để sửa đổi cột bên trái để sử dụng chiều rộng của văn bản chưa được nén và cột bên phải để sử dụng không gian còn lại mà không bị rơi overflow:hidden?

#container { 
 
    display: flex; 
 
} 
 
#sidebar { 
 
    border: 1px solid red; 
 
    flex 1 auto; 
 
    overflow: hidden; 
 
} 
 
#sidebar .column { 
 
    white-space: nowrap; 
 
} 
 
#sidebar .column span { 
 
    margin: 2px; 
 
    padding: 2px; 
 
    border: 1px solid green; 
 
    display: inline-block; 
 
} 
 
#content { 
 
    border: 1px solid black; 
 
    flex: 1 100%; 
 
}

<div id="container"> 
 
    <div id="sidebar"> 
 
     <div class="column"> 
 
      <span>Howdy Cowboy, some text is missing here</span> 
 
     </div> 
 
    </div> 
 
    <div id="content"> 
 
     Some funny content 
 
    </div> 
 
</div>

JSFIDDLE

Answer 1

Làm thế nào tôi có thể sửa đổi cột bên trái để sử dụng độ rộng của văn bản nào và cột bên phải để sử dụng không gian còn lại mà không thả overflow:hidden?

Cho biết cột bên trái chỉ rộng bằng nội dung của nó.

Vì vậy, thay vì điều này:

#sidebar { 
    flex 1 auto;   /* 1 */ 
    overflow: hidden; 
    border: 1px solid red; 
} 

Sử dụng này:

#sidebar { 
    flex: 0 1 auto;  /* 1 */ 
    overflow: hidden; 
    border: 1px solid red; 
} 

Và nói với cột bên phải để tiêu thụ bất kỳ không gian còn lại.

Thay vì điều này:

#content { 
    flex: 1 100%;   /* 2 */ 
    border: 1px solid black; 
} 

Sử dụng này:

#content { 
    flex: 1;    /* 2 */ 
    border: 1px solid black; 
} 

revised fiddle

Ghi chú:

1. flex: 1 auto là viết tắt cho 012.319.(được xác định), flex-shrink: 1 (theo mặc định) và flex-basis: auto (được xác định). Chuyển sang flex-grow: 0 vì bạn không muốn hộp mở rộng ra ngoài nội dung.

   Ngẫu nhiên, flex-grow: 0, flex-shrink: 1 và flex-basis: auto là tất cả default values. Do đó, bạn có thể bỏ qua quy tắc flex và nhận được kết quả tương tự.

   Lưu ý rằng mã của bạn sẽ không hoạt động trong mọi trường hợp vì bạn có lỗi cú pháp (thiếu :).

2. flex-basis: 100% sẽ buộc mục mở rộng nhiều nhất có thể trên chiều rộng của vùng chứa, thậm chí xâm nhập vào không gian thanh bên nếu có thể. Chỉ cần sử dụng flex: 1 (giống như flex-grow: 1, flex-shrink: 1, flex-basis: 0), cho mục này chỉ sử dụng miễn phí không gian.