높이를 알 수없는 경우 플렉스 박스를 사용하여 수직으로 중앙에 배치하는 문제

높이를 알 수없는 경우 플렉스 박스를 사용하여 수직으로 중앙에 배치하는 문제

---

내 레이아웃에는 컨테이너 flex-container와 자식이 있습니다.

HTML :

<div class="flex-container">
  <div>text</div>
</div>

컨테이너와 아이의 높이를 알 수 없습니다 . 목표는 다음과 같습니다.

• 아이의 키가 컨테이너보다 낮 으면 가로 및 세로 중앙에 나타납니다.
• 아이의 키가 컨테이너보다 크면 위쪽과 아래쪽으로 조정되어 스크롤을 할 수 있습니다.

계획:

flexbox로 요소를 중앙에 배치하는 가장 빠른 방법은 다음과 같습니다.

.flex-container
{
  display: flex;
  align-items: center; /* vertical */
  justify-content: center; /* horizontal */

  width: 100%;
  height: 300px; /* for example purposes */
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen : http://www.codepen.io/ces/pen/slicw

그러나 컨테이너의 자식 키가 더 크면 자식이 올바르게 표시되지 않습니다. 아이가 잘린 것처럼 보입니다 (상단 부분 만).

html,body
{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.flex-container
{
  display: flex;
  align-items: center; // vertical
  justify-content: center; // horizontal
  
  width: 100%;
  height: 100px;
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen : http://www.codepen.io/ces/pen/sGtfK

계획:

이 문제를 해결할 수있는 방법이 있습니까?

---

해결책을 찾았습니다.

.flex-container
{
  display: flex; /* only */
  overflow-y: scroll;
}

.flex-container > div
{
  margin: auto; /* horizontal and vertical align */
}

html,body
{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.flex-container
{
  display: flex;
  width: 100%;
  height: 100px; /* change height to 300px */
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  padding: 1em 1.5em;
  margin: auto;
  background: #E77E23;
  width: 400px;
}

<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen : http://codepen.io/ces/pen/Idklh

---

추가 align-self:flex-start;할 수 .flex-container > div도이 문제를 해결할 수 있습니다.

참조 : http://www.w3.org/TR/css-flexbox-1/#auto-margins

참고 URL : https://stackoverflow.com/questions/24538100/issue-when-centering-vertically-with-flexbox-when-heights-are-unknown