This question already has answers here:
Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
(3 answers)
Closed 2 years ago.
I created this css snippet.
.container {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
height: calc(100vh - 50px);
}
.container__img {
display: flex;
flex-direction: column;
}
.header {
background-color: red;
padding: 25px;
}
<div class="header">HEADER</div>
<div class="container">
<div class="container__inner">
<div class="container__img">
HELLO
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
</div>
</div>
</div>
I set 100vh to have the page 100% of page height, but appears the next issue when i resize the page vertically:
How you can see the image goes over the header, but it should stop when is near header like:
Question: Why it is happening and how to solve this?
Make it a habit for yourself to wrap all the divas in the main div:
<div class="main">
...
</div>
When this main div is absent in the structure of html, then problems may arise in the future.
I made some changes to the css. If you have any questions, then ask me.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
flex: auto;
}
.container__img {
display: flex;
flex-direction: column;
}
.header {
background-color: red;
padding: 25px;
}
<div class="main">
<div class="header">HEADER</div>
<div class="container">
<div class="container__inner">
<div class="container__img">
HELLO
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
</div>
</div>
</div>
</div>
When you resize the page vertically, the image goes over the header because the div "container__inner" and the div "container__img" have height: auto (by default). That means their height will be equal to the maximum height of the elements inside (here is the img).
To solve this problem, you just need to set height: 100% for one of them. Then its height will not exceed the height of the parent element (the div "container")
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
flex: auto;
}
.container__img {
display: flex;
flex-direction: column;
text-align: center;
}
.header {
background-color: red;
padding: 25px;
text-align: center;
}
<div class="main">
<div class="header">HEADER</div>
<div class="container">
<div class="container__inner">
<div class="container__img">
HELLO
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
</div>
</div>
</div>
</div>
Related
This question already has answers here:
How can I make my flexbox layout take 100% vertical space?
(4 answers)
Closed 2 years ago.
I have a page that I want to style in such a way that I have a nav bar, a fixed height div underneath it and a flexible div underneath that, the flexible div contains two elements arranged horizontally and the flexible div should take up the remaining width of the page.
I followed this tutorial however I am not achieving the effect they describe: https://css-tricks.com/boxes-fill-height-dont-squish/
I'd like the area-2 div to take up the remaining height of the page.
How can I achieve this?
Stackblitz: https://stackblitz.com/edit/js-bnrfcu?file=style.css
<div class="nav">
<h1>Nav</h1>
</div>
<div class="area1">
<h4>Area1</h4>
</div>
<div class="fill-height">
<div class="area-2">
<div class="area-2-a">
<p>Area-2a</p>
</div>
<div class="area-2-b">
<p1>Area-2b</p1>
</div>
</div>
</div>
.nav {
height: 5rem;
background-color: aqua;
}
.nav-spacer {
margin-top: 5rem;
}
.area1 {
height: 10rem;
background-color: brown;
}
.fill-height {
display: flex;
flex-direction: column;
}
.fill-height > div {
flex: 1;
}
.area-2 {
display: flex;
flex-direction: row;
width: 100%;
}
.area-2-a {
width: 20%;
background-color: #4f90ff;
}
.area-2-b {
width: 80%;
background-color: #2b41ff;
}
Make the fill-height div use all the available space min-height: 100%;, but hey, there is no space to fill, well, height: 100vh; takes care of that.
body {
height: 100vh;
}
.fill-height {
display: flex;
flex-direction: column;
min-height: 100%;
}
You can set body as a flex column container too:
body {
margin:0;
min-height: 100vh;
display: flex;
flex-flow: column;
}
.nav {
height: 5rem;
background-color: aqua;
}
.nav-spacer {
margin-top: 5rem;
}
.area1 {
height: 10rem;
background-color: brown;
}
.fill-height {
display: flex;
flex-direction: column;
flex: 1
}
.fill-height>div {
flex: 1;
}
.area-2 {
display: flex;
flex-direction: row;
}
.area-2-a {
width: 20%;
background-color: #4f90ff;
}
.area-2-b {
width: 80%;
background-color: #2b41ff;
}
<div class="nav">
<h1>Nav</h1>
</div>
<div class="area1">
<h4>Area1</h4>
</div>
<div class="fill-height">
<div class="area-2">
<div class="area-2-a">
<p>Area-2a</p>
</div>
<div class="area-2-b">
<p1>Area-2b</p1>
</div>
</div>
</div>
see probably a duplicate of your question : Fill remaining vertical space with CSS using display:flex How can I make my flexbox layout take 100% vertical space?
I have this image and this box I'm trying to put on the same line. The box is just going to be holding a header and some text, but I can't seem to get them on the same line. I'm using flexbox and I did some research into this, but can't quite work it out. Here's the code:
#container {
min-height: 95vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
height: 400px;
width: 600px;
background-color: #f5f2ed;
text-align: justify;
padding: 20px;
}
img {
width: auto;
height: 400px;
border-radius: 16px;
}
<div id="container">
<div class="main">
<img src="/">
<div class="box">
<h2>hello</h2>
<p>paragraph here...</p>
</div>
</div>
</div>
I made two divs inside the container because the image is going to be outside the box with the text.
Maybe display: flex; in .main{} can fix the problem.
You should add display:flex property to main element and flex :1 property to both child elements of main element
#container {
min-height: 95vh;
}
.main {
display : flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
height: 400px;
width: 50%;
flex : 1;
background-color: #f5f2ed;
text-align: justify;
padding: 20px;
}
img {
width: auto;
height: 400px;
flex : 1;
border-radius: 16px;
}
<div id="container">
<div class="main">
<div class="pic-div">
<img src="/">
</div>
<div class="box">
<h2>hello</h2>
<p>paragraph here...</p>
</div>
</div>
</div>
I have a layout that is mainly divided into 3 parts and the middle one should take a full height. And it does.
However, I need an additional div which will play a role of the backdrop and here the problem comes. The child doesn't want to take 100% height.
Here .body is a div that is being stretched when there is not enough content and .bg-gray is the one I want to take its parent full height.
Is there a way achieve this without using relative + absolute positioning?
Also, I'm looking for the answer to my question: why is this happening that way.
html, body {
padding: 0;
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
.header {
height: 50px;
background-color: #e6e6e6;
}
.footer {
height: 50px;
background-color: #aaa444;
}
.body {
flex: 1;
}
.bg-gray {
background-color: #eee;
min-height: 100%;
flex: 1;
}
<div class="container">
<div class="header">
</div>
<div class="body">
<div class="bg-gray">
<div>
asdasd
</div>
</div>
</div>
<div class="footer">
</div>
</div>
Apply flexbox to the .body div.
.body {
flex: 1;
display: flex;
flex-direction: column;
}
html,
body {
padding: 0;
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
.header {
height: 50px;
background-color: #e6e6e6;
}
.footer {
height: 50px;
background-color: #aaa444;
}
.body {
flex: 1;
display: flex;
flex-direction: column;
}
.bg-gray {
background-color: darkgrey;
min-height: 100%;
flex: 1;
}
.bg-gray div {
background: lightblue;
}
<div class="container">
<div class="header">
</div>
<div class="body">
<div class="bg-gray">
<div>
asdasd
</div>
</div>
</div>
<div class="footer">
</div>
</div>
I want to create a simple layout for my SPA where I have a header component, which should be shown all the time. A footer component, which should be either at the bottom of the screen or if the main content component is bigger than the screen, it should be below the content component. And a main content component which should get the rest of the space if the screen is bigger than the content, so the footer component gets rendered at the bottom.
Currently I've reproduced my layout in this codepen. But if you shrink the result window of the codepen enough, you'll get to a point where I can't see the Test2 text because the footer component is on top of it. The behaviour I would expect is, that I can see the Test2 text and I'm able to scroll down to the footer component.
It works if the content component is not a flex box with flex-direction: row. Any ideas why this doesn't work?
In my SPA I'm using React, so I don't want to use any JavaScript for this.
* {
padding: 0;
margin: 0;
font-size: 2rem;
}
.page {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
background: yellow;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
overflow: scroll;
}
.main {
flex: 1;
background: red;
display: flex;
flex-direction: row;
min-height: 30px;
}
.test {
display: block;
}
.footer {
background: green;
}
<div class="page">
<div class="header">Header</div>
<div class="container">
<div class="main">
Main
<div class="test">Test1<br />Test2<br/></div>
</div>
<div class="footer">Footer</div>
</div>
</div>
Just add flex: 1 0 auto to .main class. Flex properties are flex-grow, flex-shrink, and the flex-basis. So with 0 it is told to not shrink.
* {
padding: 0;
margin: 0;
font-size: 2rem;
}
.page {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
background: yellow;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
overflow: scroll;
}
.main {
flex: 1 0 auto;
background: red;
display: flex;
flex-direction: row;
min-height: 30px;
}
.test {
display: block;
}
.footer {
background: green;
}
<div class="page">
<div class="header">Header</div>
<div class="container">
<div class="main">
Main
<div class="test">Test1<br />Test2<br/></div>
</div>
<div class="footer">Footer</div>
</div>
</div>
I got it working. I needed to add a div with display: block; around my content and I added justify-content: space-between; to my container component. Little hacky but it works...
That's my final code:
* {
padding: 0;
margin: 0;
font-size: 2rem;
}
.page {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
background: yellow;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
justify-content: space-between;
overflow: scroll;
}
.block {
display: block;
}
.main {
background: red;
display: flex;
flex-direction: row;
}
.test {
display: block;
}
.footer {
background: green;
}
<div class="page">
<div class="header">Header</div>
<div class="container">
<div class="block">
<div class="main">
Main
<div class="test">Test1<br />Test2<br/></div>
</div>
</div>
<div class="footer">Footer</div>
</div>
</div>
I am using flexbox to center content with justify-content: center which works as intended but flexbox also moves divs to be side by side which I don't want.
Here is an example
.flex {
display: flex;
justify-content: center;
}
.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>
How can I use flexbox while retaining the default one div on top of the other positioning.
You can set flex-direction: column and then you have to use align-items: center. Default flex-direction is row.
.flex {
display: flex;
align-items: center;
flex-direction: column;
}
.content {
width: 100px;
height 100px;
color: #000;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
<div class="flex">
<div class="content"></div>
<div class="content"></div>
</div>
Try following code,
.flex {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>