Flexbox items go out of the browser window

Question

I've come across a problem while building a website; it is that some items go out of the screen.

Following is a simple code that demonstrate the problem. Here, the div with an id of name-h is the element that disappears:

html, body {
  width: 100%;
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  height: 100%;
}

#name-h {
  font-size: 34px;
  margin-bottom: 450px;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

<body>
  <div id="container">
    <div id="name-h">
      <p id="first-name">FirstNmae</p>
      <p id="last-name">LastName</p>
    </div>

    <div id="links">
      <p class="link"><a href="">Resume</a></p>
      <p class="link"><a href="">Portfolio</a></p>
      <p class="link"><a href="">Blog</a></p>
    </div>
  </div>
</body>

What is the cause of this problem?
How can I fix it?

Edit 1

It turned out that I had provided some false conclusions in the original question, so I edited the question to remove them.
-

Edit 2 (Important Clarification)

What I know is that html increases in height in order to contain its elements, and when its height becomes greater than the screen, scrollbars appear, right? Why doesn't this happen in my case? Why even I am assigning height: 100% to html, body, and #container?
-

Edit 3 (Is flexbox the reason?)

strong textI think that the flexbox might be the cause of the problem: If only we remove display: flex; from the code above, every thing works as expected. I am thinking that the flexbox might be behaving like an absolutely positioned element, which causes its items to go out of the screen. What do you think?
-

Edit 4

Here is a demonstration for the case with dummy text: link. Note that the actual text starts with "Lorem ipsum dolor sit amet, consectetuer adipiscing elit", while the text displayed starts with something else due to the problem.
-

Edit 5

I am using html, body { height: 100%; width: 100%} and #container {height: 100%;} in order to center the contents of the flex relative to the whole viewport, not only to the flex itself.

Why are you adding margin-bottom in your #name-h if you have used a flexbox container and justified contents? — Rajan Benipuri, Oct 29 '17 at 06:21
To customize the look of the page; I simply don't want equal spaces between flexbox elements.. — Ammar Alyousfi, Oct 29 '17 at 06:26
@ammarx Read [this](http://phrogz.net/css/htmlvsbody.html) article and you will understand why this happens. — VXp, Oct 29 '17 at 13:17
What I understand from the article is that `html` **increases** in height in order to contain its elements, and when its height becomes greater than the screen, **scrollbars** appear, right? Why doesn't this happen in my case? Why even I am assigning `height: 100%` to `html`, `body`, and `#container`? This is my question. — Ammar Alyousfi, Oct 29 '17 at 14:01
Could you put dummy content (like lorem ipsum text) to demonstrate your problem instead of using `margin` ? I read all your points but am still having difficulty in understanding your problem as i can't observe the disappearance of the div with id `name-h` in your code snippet. — hulkinBrain, Oct 29 '17 at 19:14
@hulkinBrain and this is the example with the problem solved as described in my answer. — Ammar Alyousfi, Oct 29 '17 at 19:31

score 1 · Answer 1 · answered Oct 29 '17 at 06:43

1

You have declared the height of container which is also a flexbox here height:100%; and given a margin-bottom:450px; to your inner div #name-h

This is possibly causing the issue. Try changing the height of container with height:auto;

Hope this help.

answered Oct 29 '17 at 06:43

Rajan Benipuri

1,772
1
9
21

1

This appears to solve the problem, but for me, it doesn't: It prevents items from going out of the screen, but given a screen with a height much greater than `450px`, the container will appear in the top of the screen not in the center. I used `height: 100%`on the container in order to make items appear in the center. Thank you. – Ammar Alyousfi Oct 29 '17 at 10:45
Can you show anything similar to your expected layout position because I think I am not getting your point. Like if you want to center the div, why are you adding margin-bottom to that div. I mean how margin-bottom helps you achieve your desired result. – Rajan Benipuri Oct 29 '17 at 11:18
I used this code (with `margin-bottom: 450px`) in my question **just to demonstrate the problem**. My actual code is much longer, so I chose to not put it to make it easier for others to answer my question. – Ammar Alyousfi Oct 29 '17 at 12:27
The code in my question causes the #name-h section to disappear from the document. The expected behavior is simply that it shows up. Even with margin-bottom: 1000px, it should still show up in the top of the page, right? – Ammar Alyousfi Oct 29 '17 at 12:27
Yes, I want to center the div, but at the same time, I don't want the items inside the div to be very close to each other, so I use `margin-bottom` to achieve that. – Ammar Alyousfi Oct 29 '17 at 12:28

score 1 · Answer 2 · answered Oct 29 '17 at 19:37

1

You don't need to specify height: 100%; in html or body. The width is by default 100% and the height varies according to the content inside.

You can solve your issue by removing html, body { height: 100%; width: 100%} and more specifically html{ height: 100%;}.

You shouldn't style html viewport dimensions using css since it could break your code. It is good practice to style your div tags and not your html tag. Here is the link.

answered Oct 29 '17 at 19:37

hulkinBrain

746
8
28

Yes. That works, but see my comment on Rajan Benipuri answer which also solve the problem: I want the flex contents centered vertically inside the whole viewport not only inside the flex itself. That's why I used `html, body { height: 100%; width: 100%}` and `#container {height: 100%;}`. I forgot to add this to the question. Sorry. – Ammar Alyousfi Oct 29 '17 at 19:46
Are you sure that I should not use `height: 100%` with `html`? I found [this](https://stackoverflow.com/a/24979148/2282785) answer on StackOverflow which uses it like I did. – Ammar Alyousfi Oct 29 '17 at 20:12
@ammarx If you are going to use `height: 100%` you need to be careful with the child `div` dimensions. And I think you still are learning about html and css. That's why i said, its good practice not to specify height in `html` :D – hulkinBrain Oct 30 '17 at 03:31
I still can't see what's wrong in doing that; if you have a useful resource, it would be good. – Ammar Alyousfi Oct 30 '17 at 04:12
However, it turns out that even my solution to the problem doesn't keep the items centered relative to the viewport. So initially, Rajan Benipuri's answer, my answer, and your answer are valid solutions – Ammar Alyousfi Oct 30 '17 at 04:16
@ammarx Instead of using `align-content: center` use `align-items: center`. Items will be centered then – hulkinBrain Oct 30 '17 at 04:26
Note that flex direction is `column`, which means `align-items` is concerned with centering items horizontally in this case. Nonetheless, I've tried it, and no change occurred :) – Ammar Alyousfi Oct 30 '17 at 04:45
However, I am working on a JavaScript solution to keep the contents of `#container` centered relative to the viewport. – Ammar Alyousfi Oct 30 '17 at 04:47

score 0 · Answer 3 · answered Oct 29 '17 at 18:45

0

I would try setting flex-flow: column wrap; in container. Either this give the container a width. I love flex-box but sometimes as with any relationship it will occasionally drive you crazy

answered Oct 29 '17 at 18:45

Shawn Sheehan

191
2
16

Ammar Alyousfi · Answer 4 · 2017-10-30T04:18:39.327

Adding a wrapper div around the #container div prevents items from going out of the browser window. However, #container items are not still centered relative to the viewport.

Here is the modified code:

html,
body {
  width: 100%;
  height: 100%;
}

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  height: 100%;
}

#name-h {
  font-size: 34px;
  margin-bottom: 450px;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

<body>
  <div> <!--The only new div-->
    <div id="container">
      <div id="name-h">
        <p id="first-name">FirstNmae</p>
        <p id="last-name">LastName</p>
      </div>

      <div id="links">
        <p class="link"><a href="">Resume</a></p>
        <p class="link"><a href="">Portfolio</a></p>
        <p class="link"><a href="">Blog</a></p>
      </div>
    </div>
  </div>
</body>

Yup this works too, I've provided the explanation in my solution. The reason why your solution worked is that the parent div of `#container` before you added the **new div** was `body`. It isn't good practice to change dimensions of `html` tag or `body` tag using css. It could break your code. You should style your divs instead, like you added a parent container to your `name-h` div. The `height: 100%` property works according to the parent container's height dimensions. If the height of parent div would've been 100px, then `height: 100%` of `name-h` div would've been 100px. — hulkinBrain, Oct 29 '17 at 19:45

score -1 · Answer 5 · answered Aug 14 '20 at 22:55

-1

Flex-wrap property can solve this issue. Use it like this:

flex-wrap: wrap

answered Aug 14 '20 at 22:55

H S W

6,310
4
25
36

What is the point in adding flex-wrap: wrap? – Andrei Bacescu Nov 19 '21 at 15:26