플렉스 컨테이너의 넘침/언더 플로우를 방지하려면 어떻게해야합니까?

Question

드래그하여 크기를 조절할 수있는 플렉스 박스 컨테이너가 있습니다. 해당 컨테이너가 너무 작아지고 일부 항목을 숨기기 시작하거나 언더 플로우하는 것을 방지하려면 어떻게해야합니까?

다음 예제에서 모든 항목이 높이가 아닌 마지막 항목을 제외한 18px에 도달하면 컨테이너의 축소가 중지되어야하며 모든 항목이 최대 높이에 도달하면 확장이 중지됩니다 (공백이 나타나지 않아야 함).

const resizable = document.querySelector('.flex'); 
 
let startHeight = NaN; 
 
let startY = NaN; 
 

 
resizable.addEventListener('mousedown', e => { 
 
    startHeight = resizable.getBoundingClientRect().height; 
 
    startY = e.pageY; 
 
}); 
 

 
window.addEventListener('mousemove', e => { 
 
    if (isNaN(startY) || isNaN(startHeight)) { 
 
    return; 
 
    } 
 
    
 
    resizable.style.height = (startHeight + e.pageY - startY) + 'px'; 
 
}); 
 

 
window.addEventListener('mouseup',() => { 
 
    startHeight = startY = NaN; 
 
});

.flex { 
 
    display: flex; 
 
    flex-direction: column; 
 
    overflow: hidden; 
 
    border: 1px solid black; 
 
    cursor: ns-resize; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
.item-1 { 
 
    background: red; 
 
    height: 40px; 
 
    max-height: 60px; 
 
    flex: 1; 
 
} 
 

 
.item-2 { 
 
    background: blue; 
 
    flex: none; 
 
} 
 

 
.item-3 { 
 
    background: green; 
 
    height: 50px; 
 
    max-height: 50px; 
 
    flex: 1; 
 
} 
 

 
.item-4 { 
 
    background: yellow; 
 
    height: 30px; 
 
    flex: none; 
 
}

<div class="flex"> 
 
    <div class="item-1"> 
 
    Item 1 
 
    </div> 
 
    <div class="item-2"> 
 
    Item 2 
 
    </div> 
 
    <div class="item-3"> 
 
    Item 3 
 
    </div> 
 
    <div class="item-4"> 
 
    Item 4 
 
    </div> 
 
</div>

순수 CSS 솔루션

하는 것이 바람직 할 것이다. 솔루션은 모든 항목이 최소 크기가되도록 컨테이너를 축소하고 모든 항목이 최대 크기를 차지하도록 확장해야합니다. 컨테이너의 CSS에서 최소 및 최대 높이를 하드 코딩하는 것은 허용되지 않습니다. 일반 솔루션을 찾고 있습니다.

Answer 1

자바 스크립트를 사용하여 높이를 절대적으로 설정 했으므로 여기서는 순수 CSS 솔루션을 사용할 수 없다고 생각합니다.

아래 스 니펫에서 수행 한 것처럼 보호자를 추가 할 수 있습니다. 크기 재조정 크기가이 라이브러리를 본 적이 제로이며 거대 때 (DOM의 변화에 ​​아마 더 나은 성능하지만 나쁜) 그 기반으로 경계

const resizable = document.querySelector('.flex'); 
 
const lastChild = resizable.querySelector(':last-child'); 
 
const resizableBorderBottom = 1; // hardcoded - could be computed too 
 
let startHeight = NaN; 
 
let startY = NaN; 
 

 
resizable.addEventListener('mousedown', e => { 
 
    /* 
 
    * here we assume that the bottom of the last child 
 
    * is the same as the bottom of the resizable for simplicity 
 
    */ 
 
    startHeight = resizable.getBoundingClientRect().height; 
 
    startY = e.pageY; 
 
}); 
 

 
window.addEventListener('mousemove', e => { 
 
    if (isNaN(startY) || isNaN(startHeight)) { 
 
    return; 
 
    } 
 
    const lastHeight = resizable.style.height; 
 
    resizable.style.height = ((startHeight + e.pageY - startY) | 0) + 'px'; 
 
    const lastChildBottom = lastChild.getBoundingClientRect().bottom | 0; 
 
    const resizableBottom = (resizable.getBoundingClientRect().bottom | 0) - resizableBorderBottom; 
 
    // check if we need to revert the change 
 
    if (lastChildBottom !== resizableBottom) { 
 
    resizable.style.height = lastHeight; 
 
    } 
 
}); 
 

 
window.addEventListener('mouseup',() => { 
 
    startHeight = startY = NaN; 
 
});

.flex { 
 
    display: flex; 
 
    flex-direction: column; 
 
    overflow: hidden; 
 
    border: 1px solid black; 
 
    cursor: ns-resize; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
.item-1 { 
 
    background: red; 
 
    height: 40px; 
 
    max-height: 60px; 
 
    flex: 1; 
 
} 
 

 
.item-2 { 
 
    background: blue; 
 
    flex: none; 
 
} 
 

 
.item-3 { 
 
    background: green; 
 
    height: 50px; 
 
    max-height: 50px; 
 
    flex: 1; 
 
} 
 

 
.item-4 { 
 
    background: yellow; 
 
    height: 30px; 
 
    flex: none; 
 
}

<div class="flex"> 
 
    <div class="item-1"> 
 
    Item 1 
 
    </div> 
 
    <div class="item-2"> 
 
    Item 2 
 
    </div> 
 
    <div class="item-3"> 
 
    Item 3 
 
    </div> 
 
    <div class="item-4"> 
 
    Item 4 
 
    </div> 
 
</div>