Menu
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?
It turned out that I had provided some false conclusions in the original question, so I edited the question to remove them.
-
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?
-
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?
-
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.
-
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.
244
If you are using flexbox and want the content to wrap, you must specify flex-wrap: wrap . By default flex items don't wrap. To have the images be three-across, you should specify flex-basis: 33.33333% .
Flexbox is very well supported across modern browsers, however there are a few issues that you might run into.
For aligning columns to the left, the align-content property will set to 'flex-start'. For aligning columns to the right, the align-content property will set to 'flex-end'. For aligning columns to the extreme ends, the align-content property will set to 'space-between'.
The flexbox properties are supported in all modern browsers. To start using the Flexbox model, you need to first define a flex container. The element above represents a flex container (the blue area) with three flex items. You will learn more about flex containers and flex items in the next chapters.
Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns. By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.
The flexbox properties are supported in all modern browsers. To start using the Flexbox model, you need to first define a flex container. The element above represents a flex container (the blue area) with three flex items.
Try resizing your browser, and you’ll notice that the flex items don’t shrink with its width. They pop out of the parent element, and you have to scroll your browser horizontally to view all the content. No worries, I’ll show you how to deal with this weird behavior later.
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.
168
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.
1
answered Oct 13 '22 18:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
