Problem przy centrowaniu w pionie za pomocą flexbox, gdy wysokość nie jest znana

Question

Problem przy centrowaniu w pionie za pomocą flexbox, gdy wysokość nie jest znana

Mój układ ma kontener flex-container i dziecko.

HTML:

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

Pojemnik i dziecko mają nieznany wzrost. A celem jest:

jeśli dziecko ma niższą wysokość niż kontener, jest wyśrodkowane poziomo i pionowo.
jeśli dziecko ma większą wysokość niż pojemnik, dopasowuje się do góry i dołu i możemy zrobić przewijanie.

Schemat: Tutaj wpisz opis obrazka

Najszybszy sposób na centrowanie a element z flexbox jest następujący:

.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

Ale jeśli dziecko kontenera ma większy wzrost, dziecko nie jest wyświetlane poprawnie. Dziecko wydaje się przycięte (tylko górna część).

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

Schemat:

Tutaj wpisz opis obrazka

Czy istnieje sposób na rozwiązanie tego problemu?

67

css css3 flexbox height overflow

Author: Vadim Ovchinnikov, 2014-07-02

Source

2 answers

Dodanie align-self:flex-start; do .flex-container > div może również rozwiązać ten problem.

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

1

Author: iwege,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-28 15:43:21

score 136 · Accepted Answer

Znalazłem rozwiązanie:

.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