Nie można przewijać na górę elementu flex, który jest przepełniony kontenerem

Cóż, zgodnie z Prawem Murphy ' ego, czytanie, które zrobiłem po opublikowaniu tego pytania, przyniosło kilka rezultatów - nie do końca rozwiązanych, ale mimo wszystko przydatnych.

Grałem trochę z min-height przed publikacją, ale nie byłem świadomy wewnętrznych ograniczeń rozmiaru, które są dość nowe w specyfikacji.

Http://caniuse.com/#feat=intrinsic-width

Dodanie min-height: min-content do obszaru flexbox rozwiązuje problem w Chrome, a z prefiksami dostawcy naprawia również operę i Safari, choć Firefox pozostaje nierozwiązany.

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

Wciąż szukam pomysłów na Firefoksa i inne potencjalne rozwiązania.

Udało mi się to zrobić tylko trzema pojemnikami. Sztuką jest oddzielenie pojemnika flexbox od pojemnika kontrolującego przewijanie. Na koniec umieść wszystko w kontenerze głównym, aby wyśrodkować wszystko. Oto podstawowe style do tworzenia efektu:

CSS:

.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;
}

HTML:

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

Stworzyłem demo tutaj: https://jsfiddle.net/r5jxtgba/14/

Chyba znalazłem rozwiązanie. Działa z dużą ilością tekstu i małym tekstem . Nie musisz określać szerokości czegokolwiek, a to powinno działać w IE8.

.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>

Zgodnie z MDN, wartość safe może być teraz dostarczana do właściwości takich jak align-items oraz justify-content. Opisywany jest następująco:

Jeśli rozmiar elementu przepełnia kontener wyrównania, element jest wyrównany tak, jakby tryb wyrównania był start.

Więc, może być stosowany w następujący sposób.

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

Nie jest jednak jasne, ile ma wsparcia dla przeglądarki, nie mogłem znaleźć żadnych przykładów jej użycia, a miałem pewne problemy z ja też. Wspominając o tym tutaj, aby zwrócić na to większą uwagę.

Udało mi się również zrobić to za pomocą dodatkowego pojemnika

HTML

<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>

CSS

.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;
}

W jsfiddle > https://jsfiddle.net/Nash171/cpf4weq5/

Zmień .content width/height wartości i patrz

2 Container Flex Method with table fallback tested IE8-9, flex działa w IE10,11. Edycja: edytowano, aby zapewnić pionowe centrowanie przy minimalnej zawartości, dodano obsługę starszych wersji.

Problem wynika z tego, że wysokość jest dziedziczona z rozmiaru ekranu, co powoduje przepełnienie dzieci, jak odpowiedział Michael. https://stackoverflow.com/a/33455342/3500688

Coś prostszego i użyj flex, aby utrzymać układ w kontenerze popup (zawartość):

#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>