Flexbox div turns off the screen on a small screen

Question

First code:

html {
  display:flex;
  width:100%;
  height:100%;
}

body {
 display:flex;
  flex:1;
}

.container {
  display:flex;
  flex:1;
  overflow-y:auto;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.block1 {
  justify-content:center;
  background-color:green;
  display:flex;
  width:300px;
  min-height:150px;
}

.block2 {
  background-color:blue;
  display:flex;
  min-height:300px;
    width:500px;

}

<div class="container">
<div class="block1">
  <img src="https://tse2.mm.bing.net/th?id=OIP.M252f960f4a4f32c22914d8d87623f066o0&pid=15.1">
</div>
<div class="block2"></div>
</div>

Run codeHide result

I have two blocks in a container. I want them focused on the screen. The problem is that the screen height is small, I have a scroll bar that appears, but the first block has a part that goes to the screen (invisible).

To play, reduce the height of the jsfiddle preview window. You will understand what I mean by going out on the screen.

The expected behavior is for the scroll bar to display and retain the appearance of the div.

I tried setting flex-shrink to 0 on each element, but it does not work ...

Answer 1

Flexbox auto.

• justify-content: center .container.
• margin-top: auto .block1.
• margin-bottom: auto .block2.

html {
  display:flex;
  width:100%;
  height:100%;
}

body {
 display:flex;
  flex:1;
}

.container {
  display:flex;
  flex:1;
  overflow-y:auto;
  flex-direction:column;
  align-items:center;
}

.block1 {
  justify-content:center;
  background-color:green;
  display:flex;
  width:300px;
  min-height:150px;
  margin-top: auto;
}

.block2 {
  background-color:blue;
  display:flex;
  min-height:300px;
  width:500px;
  margin-bottom: auto;
}

<div class="container">
<div class="block1">
  <img src="https://tse2.mm.bing.net/th?id=OIP.M252f960f4a4f32c22914d8d87623f066o0&pid=15.1">
</div>
<div class="block2"></div>
</div>

Hide result

Answer 2

position: absolute; top: 0 :

html {
  display:flex;
  width:100%;
  height:100%;
}

body {
 display:flex;
  flex:1;
}

.container {
  display:flex;
  flex:1;
  overflow-y:auto;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position: absolute;
  top: 0;
}

.block1 {
  justify-content:center;
  background-color:green;
  display:flex;
  width:300px;
  min-height:150px;
}

.block2 {
  background-color:blue;
  display:flex;
  min-height:300px;
    width:500px;

}

<div class="container">
<div class="block1">
  <img src="https://tse2.mm.bing.net/th?id=OIP.M252f960f4a4f32c22914d8d87623f066o0&pid=15.1">
</div>
<div class="block2"></div>
</div>

Hide result

Answer 3

There are a lot of unnecessary things in your code (for example, display:flexin html, body and some other materials. I deleted all this and it seems to work now:

html, body {
  height:100%;
}

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

.block1 {
  display:flex;
  justify-content:center;
  background-color:green;
  width:300px;
  min-height:150px;
}

.block2 {
  display:flex;
  background-color:blue;
  min-height:300px;
  width: 100%;
  max-width: 500px;
}

<div class="container">
<div class="block1">
  <img src="https://tse2.mm.bing.net/th?id=OIP.M252f960f4a4f32c22914d8d87623f066o0&pid=15.1">
</div>
<div class="block2"></div>
</div>

Run codeHide result

.block2had a fixed width of 500 pixels. On screens less than 500 pixels wide, this will result in a scroll bar. To be responsive, I changed it to

width: 100%;
max-width: 500px;