Flexbox CSS를 사용하여 이와 같은 것을 달성하고 싶습니다. 메뉴는 너비가 고정되어 있지만 표는 자동으로 커질 수 있으며 헤더는 길더라도 표 너비를 초과해서는 안 됩니다. 즉, 테이블은 열 컨테이너를 확장할 수 있어야 하지만 헤더는 확장할 수 없어야 합니다.
단 하나의 플렉스 컬럼으로 쉽게 구현할 수 있습니다.
그런데 메뉴를 추가할 때 모든 것이 제대로 작동하지 않고 제목이 잘리지 않습니다.
그래서 제목이 포함된 요소의 크기가 형제 요소와 함께 변경되지만 자체 하위 요소는 변경되지 않기를 원합니다.
제가 생각할 수 있는 유일한 방법은 제목 텍스트를 적절한 요소로 감싸는 것입니다. 이 경우에는 <span> - 然后使用position: absolute将其从流中取出，并在标题的父元素上使用position: relative. 그런 다음 제목의 높이를 설정해야 합니다.
<span>
position: absolute
position: relative
너비를 flex: 0 0 200px로 바꾸었습니다. 이렇게 하면 메뉴의 크기가 변경되지 않고 항상 200px로 유지됩니다.
flex: 0 0 200px
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
그래서 제목이 포함된 요소의 크기가 형제 요소와 함께 변경되지만 자체 하위 요소는 변경되지 않기를 원합니다.
제가 생각할 수 있는 유일한 방법은 제목 텍스트를 적절한 요소로 감싸는 것입니다. 이 경우에는
<span>- 然后使用position: absolute将其从流中取出，并在标题的父元素上使用position: relative. 그런 다음 제목의 높이를 설정해야 합니다.예
너비를
flex: 0 0 200px로 바꾸었습니다. 이렇게 하면 메뉴의 크기가 변경되지 않고 항상 200px로 유지됩니다.