안전 센터를 flexbox와 함께 사용하는 방법은 무엇입니까?

Question

가운데 flexbox 항목은 바람직하지 않은 동작을 나타낼 수 있습니다 when they overflow their container.

이 문제에 대해 여러 가지 비 유연성 솔루션이 제공되었지만 according to MDN 값은 safe이며 다음과 같이 설명됩니다.

항목의 크기가 정렬 컨테이너를 오버플로하는 경우 항목은 정렬 모드가 시작된 것처럼 정렬됩니다.

다음과 같이 사용할 수 있습니다.

align-items: safe center; 

불행하게도,이 모든 예 또는 토론을 찾을하거나 거기에 얼마나 많은 브라우저 지원 결정할 수 없었다.

나는 safein this CodePen을 사용하려고 시도했습니다. 그러나, 그것은 나를 위해 작동하지 않습니다. safe이 무시되거나 컨테이너 요소의 스타일이 잘못 지정된 것 같습니다.

누구든지 safe에 대한 의견을 밝히고 CodePen 예제에서 보여 주듯이 오버 플로우 문제를 해결하는 데 사용할 수 있는지 여부 및 사용 방법에 대해 고맙게 생각합니다.

Answer 1

safe 키워드는 여전히 working draft이며 많은 브라우저 (있는 경우)가 지원하지 않으므로 동일한 효과를 얻으려면 브라우저에서 을 사용하십시오.이 광고는 flex 항목에서 설정해야합니다.

Updated codepen

참고는 modal의 50 픽셀의 위쪽/아래쪽 여백을 보상 modal-container에 padding를 사용합니다.

.modal-container 
{ 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: flex-start;    /* changed */ 
    position: fixed; 
    width: 100vw; 
    height: 100vh; 
    overflow-y: scroll; 
    padding: 50px 0;      /* added */ 
    box-sizing: border-box;     /* added */ 
} 
.modal-container > #modal 
{ 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin: auto 0;       /* changed */ 
    padding: 12px; 
    width: 50%; 
    background-color: #333; 
    cursor: pointer; 
}