17

Code first:

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>

I have two blocks in a container. I want them centered on the screen. The issue is when the screen height is small, I have a scrollbar that appear but the first block have a part that go offscreen (is invisible)

To reproduce, decrease the height of the jsfiddle preview window. You will understand what I mean by going off screen.

The expected behavior is to let the scroll bar appear and keep the div visible.

I tried by setting flex-shrink to 0 on every element but it isn't working...

2 Answers 2

31

You can make use of Flexbox's auto margins.

  1. Remove justify-content: center from .container.
  2. Add margin-top: auto to .block1.
  3. Add margin-bottom: auto to .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>

2
  • So easy that I didn't think at it, so I manage differently my html without using justify-content. Frustrating that I still don't understand why my full flexbox design isn't working but at least I can move on. Thanks ;-)
    – Adavo
    Oct 14, 2016 at 8:29
  • Glad to help! Flexbox is quite a learning curve, but you'll get there eventually!
    – darrylyeo
    Oct 14, 2016 at 13:42
-1

You can add position: absolute; top: 0 to the container:

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>

1
  • If I set width:100%, ok on this sample but unfortunately it doesn't work on my project (more complex than this sample). Maybe I will try to change the sample to reproduce the bug even with position:absolute and top:0
    – Adavo
    Oct 13, 2016 at 10:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.