제목이 다음과 같이 재작성되었습니다: 가변상자 메뉴 및 제목이 있는 테이블 - 테이블 너비에 따라 제목을 자를 수 있습니까?

Question

Flexbox CSS를 사용하여 이와 같은 것을 달성하고 싶습니다. 메뉴는 너비가 고정되어 있지만 표는 자동으로 커질 수 있으며 헤더는 길더라도 표 너비를 초과해서는 안 됩니다. 즉, 테이블은 열 컨테이너를 확장할 수 있어야 하지만 헤더는 확장할 수 없어야 합니다.

으아악

단 하나의 플렉스 컬럼으로 쉽게 구현할 수 있습니다.

으아악

그런데 메뉴를 추가할 때 모든 것이 제대로 작동하지 않고 제목이 잘리지 않습니다.

으아악

Answer 1

그래서 제목이 포함된 요소의 크기가 형제 요소와 함께 변경되지만 자체 하위 요소는 변경되지 않기를 원합니다.

제가 생각할 수 있는 유일한 방법은 제목 텍스트를 적절한 요소로 감싸는 것입니다. 이 경우에는 <span> - 然后使用position: absolute将其从流中取出，并在标题的父元素上使用position: relative. 그런 다음 제목의 높이를 설정해야 합니다.

예

너비를 flex: 0 0 200px로 바꾸었습니다. 이렇게 하면 메뉴의 크기가 변경되지 않고 항상 200px로 유지됩니다.

으아악 으아악