Container stretching with flex display

Question

I have the following in my HTML file:

<div class="container-box">
    <div class="profile-box">
        <div class="image-container">
            <div class="profile-picture"></div>
        </div>
    </div>
</div>

In my CSS file, I have the following:

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

.profile-box {
  height: 350px;
  width: 500px;
  background-color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

This results in my profile-box being center-aligned, but I also want it vertically aligned. I have tried changing the flex-direction to row, but that only stretches it to take over all the horizontal space.

Here is a codepen: https://codepen.io/Humad/pen/rKLMeo

.container-box { height: 100vh; } .profile-box { /*flex: 1;*/ } — VXp, Jun 05 '18 at 23:23
MickeyTheMouse, did my answer help you? If you need extra help, feel free to ask. — Jos van Weesel, Jun 07 '18 at 08:45

Jos van Weesel · Accepted Answer · 2018-06-05T23:38:36.800

1

It is already centered, but your body and .container-box do not have a height set for it go in the center.

JSFiddle demo

body, html {
  height: 100%; /* added */
  width: 100%; /* added */
  margin: 0; /* added */
}

.container-box {
  height: 100%; /* added */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: black;
}

edited Jun 05 '18 at 23:38

answered Jun 05 '18 at 23:33

Jos van Weesel

2,128
2
12
27

Container stretching with flex display

1 Answers1

JSFiddle demo