Проблема при вертикальном центрировании с помощью flexbox, когда высота неизвестна

у моего макета есть контейнер 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

схема:

есть ли способ решить эту проблему?

2 67
css css3 flexbox overflow height

2 ответа:

Я нашел решение:

.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

136

добавить align-self:flex-start; до .flex-container > div может решить эту проблему тоже.

см.:http://www.w3.org/TR/css-flexbox-1/#auto-margins

1