Html – Flexbox items go out of the browser window

csshtmlmarginviewport

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.

Best Answer

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.

Related Topic