문제

Flexbox는 센터링을 매우 쉽게 만듭니다.

Flex 컨테이너 를 간단히 적용 align-items: center하고 justify-content: centerFlex 컨테이너에 적용하면 Flex 품목이 수직 및 수평 중앙에 배치됩니다.

그러나, 플렉스 아이템이 플렉스 컨테이너보다 크면이 방법에 문제가있다.

문제에서 언급했듯이, 플렉스 아이템이 컨테이너를 넘치면 상단에 액세스 할 수 없게됩니다.

수평 오버플로의 경우 왼쪽 섹션에 액세스 할 수 없게됩니다 (또는 RTL 언어의 오른쪽 섹션).

다음은 justify-content: center3 개의 flex 항목 이있는 LTR 컨테이너의 예입니다 .

이 동작에 대한 설명은이 답변의 맨 아래를 참조하십시오.

해결책 # 1

이 문제를 해결하려면 대신 flexbox 자동 여백 을 사용하십시오 justify-content.

와 auto여백, 넘쳐 플렉스 항목은 수직 및 수평의 어떤 부분에 대한 액세스를 잃지 않고 중심을 할 수 있습니다.

따라서 플렉스 컨테이너 에서이 코드 대신 :

#flex-container {
    align-items: center;
    justify-content: center;
}

flex 코드에서이 코드를 사용하십시오.

.flex-item {
    margin: auto;
}

수정 된 데모

솔루션 # 2 (대부분의 브라우저에서 아직 구현되지 않음)

safe키워드 정렬 규칙에 다음과 같이 값을 추가하십시오 .

justify-content: safe center

또는

align-self: safe center

로부터 CSS 박스 정렬 모듈 사양 :

4.4. 오버 플로우 정렬 : safe및 unsafe키워드 및 스크롤 안전 한계

[flex item]이 [flex container]보다 크면 오버플로됩니다. 예를 들어, 사이드 바의 내용이 중앙에 오면 넘치면 상자의 일부를 뷰포트의 시작 가장자리를 지나서 스크롤 할 수없는 일부 부분을 보낼 수 있습니다. .

이 상황을 제어하기 위해 오버 플로우 정렬 모드를 명시 적으로 지정할 수 있습니다. Unsafe정렬은 데이터 손실을 유발하더라도 오버플로 상황에서 지정된 정렬 모드를 유지하는 반면, safe정렬 은 데이터 손실 을 피하기 위해 오버플로 상황에서 정렬 모드를 변경합니다.

기본 동작은 스크롤 가능 영역 내에 정렬 주제를 포함하는 것입니다. 그러나이 안전 기능을 작성할 때는 아직 구현되지 않았습니다.

safe

[flex 항목]의 크기가 [flex 컨테이너]를 초과하면 정렬 모드가 [ flex-start] 인 것처럼 [flex 항목]이 대신 정렬됩니다 .

unsafe

[flex item] 및 [flex container]의 상대적 크기에 관계없이 주어진 정렬 값이 적용됩니다.

참고 : Box Alignment Module은 플렉스뿐만 아니라 여러 박스 레이아웃 모델에서도 사용할 수 있습니다. 따라서 위의 발췌 부분에서 괄호 안의 용어는 실제로 “정렬 제목”, “정렬 컨테이너”및 ” start“입니다. 나는이 특정 문제에 계속 초점을 맞추기 위해 플렉스 특정 용어를 사용했습니다.

MDN의 스크롤 제한에 대한 설명 :

플렉스 아이템 고려 사항

Flexbox의 정렬 속성은 CSS의 다른 센터링 방법과 달리 “진정한”센터링을 수행합니다. 이것은 플렉스 아이템이 플렉스 컨테이너에 넘치더라도 플렉스 아이템이 중앙에 유지된다는 것을 의미합니다.

그러나 내용이 있더라도 해당 영역으로 스크롤 할 수 없기 때문에 페이지 상단 가장자리 나 왼쪽 가장자리 […]를지나 넘치면 문제가 될 수 있습니다.

다음 릴리스에서는 정렬 속성이 “안전한”옵션을 갖도록 확장 될 것입니다.

지금은 이것이 문제가되는 경우 마진을 사용하여 센터링을 수행 할 수 있습니다. 마진은 “안전한”방식으로 응답하고 오버플로가 발생하면 센터링을 중지하므로 센터링을 수행 할 수 있습니다.

align-속성 을 사용하는 대신 가운데 에 auto맞추려는 플렉스 항목 에 여백을 두십시오 .

justify-속성 대신 플렉스 컨테이너에서 첫 번째 및 마지막 플렉스 항목의 바깥 쪽 가장자리에 자동 여백을 둡니다.

auto여백은 “유연”하고 남은 공간을 가정하고, 남은 공간이 있으면 플렉스 항목을 중앙에두고 , 그렇지 않으면 정상 정렬로 전환합니다.

그러나 justify-content여러 줄로 된 flexbox에서 여백 기반의 센터링 으로 교체하려는 경우 각 줄의 첫 번째 및 마지막 flex 항목에 여백을 넣어야하기 때문에 운이 좋지 않을 수 있습니다. 어떤 항목이 어떤 라인에서 끝나는 지 미리 예측할 수 없으면 주축에서 마진 기반 중심을 안정적으로 사용하여 justify-content속성 을 대체 할 수 없습니다 .

답변

min-height: -moz-min-content; // not implemented
min-height: -webkit-min-content // works for opera and safari
min-height: min-content // works for chrome

.root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-container {
  margin: auto;
  max-height: 100%;
  overflow: auto;
}

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="root">
  <div class="scroll-container">
    <div class="flex-container">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>

.wrap1 {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}
.wrap2 {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.wrap3 {
  vertical-align: middle;
  display: table-cell;
}
.wrap4 {
  margin: 10px;
}
.dialog {
  text-align: left;
  background-color: white;
  padding: 5px;
  border-radius: 3px;
  margin: auto;
  display: inline-block;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
}

<div class="wrap1">
  <div class="wrap2">
    <div class="wrap3">
      <div class="wrap4">
        <div class="dialog">
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
</div>

.rule
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: safe center;
}

<div class="modal-container">
  <div class="modal">
    <div class="content-container">
       <div class="content">
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
      </div>
  </div>
</div>

.modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: black;
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #aaa;
  height: 80%;
  width: 90%;
}

.content-container {
  background-color: blue;
  max-height: 100%;
  overflow: auto;
  padding:0;
}

.content {
  display: flex;
  background-color: red;
  padding: 5px;
  width: 900px;
  height: 300px;
}

#popup {
position: fixed;
top: 0;
left: 0;
right: 0;
min-height: 100vh;
background-color: rgba(0,0,0,.25);
margin: auto;
overflow: auto;
height: 100%;
bottom: 0;
display: flex;
align-items: flex-start;
box-sizing:border-box;
padding:2em 20px;
}
.container {
background-color: #fff;
margin: auto;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
/* width: 100%; */
max-width: 500px;
padding: 10px;
    /* display: flex; */
    /* flex-wrap: wrap; */
}
		<!--[if lt IE 10]>
<style>
	  #popup {
			display: table;
			width:100%;
		}
		.iewrapper {
			display: table-cell;
			vertical-align: middle;
		}
	</style>
	<![endif]-->

<div id="popup">
	<!--[if lt IE 10]>
<div class="iewrapper">
<![endif]-->
    <div class="container">
        <p class="p3">Test</p>
    <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
	<!--[if lt IE 10]>
<div class="iewrapper">
<![endif]-->
</div>