플렉스/그리드 레이아웃에서는 형제 항목의 크기가 제한됩니다.
P粉134288794
2023-08-24 12:52:48
<p>각각 동적 콘텐츠가 포함된 두 개의 형제 요소가 있습니다. </p>
<pre class="brush:php;toolbar:false;"><div class="flex">
<div class="sibling-1"></div>
<div class="sibling-2"></div>
<p>어떤 경우에는 <code>sibling-1</code>에 <code>sibling-2</code>보다 더 많은 콘텐츠가 포함되며 그 반대의 경우도 마찬가지입니다.
나는 두 번째 요소
sibling-2의 높이가 항상 첫 번째
sibling-1의 높이와 같기를 원합니다. <code>sibling-2</code>의 높이가 <code>sibling-1</code>의 높이보다 크면 <code>flex</code> div가 오버플로되고 스크롤 가능해집니다. . </p>
<p>Flexbox를 사용하여 이 효과를 얻을 수 있는 방법이 있나요? </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
기본적으로는 아닙니다. 플렉스 높이 기능은 특정 형제 요소가 아닌 컨테이너의 높이를 기반으로 합니다.
따라서 형제 요소 1과 형제 요소 2는 항상 같은 높이일 수 있습니다.
그러나 Flexbox에는 항목을 형제 요소와 동일한 높이로 제한하는 내장 메커니즘이 없습니다.
JavaScript 또는 CSS 위치 지정 속성을 사용해 보세요.
다음은 절대 위치 지정을 사용한 예입니다.
jsFiddle
네, 가능합니다. 형제 노드에서 설정한 최대 높이를 유지하고, 다른 노드의
flex-basis: 0和flex-grow: 1를 사양에 따라 형제 노드와 동일한 높이로 확장되도록 설정합니다. 절대적인 위치는 없습니다. 어떤 요소에도 높이가 설정되지 않습니다.