I am stuck on this issue for two days straight now and exhausted trying all possibilities. So I have simplified the jsfiddle example below. Basically I am trying to use stretch in IE 10, and its failing. When the #left-panel stretches the #wrapper does not stretch with it. I need both of these divs (#left-panel & #wrapper) to be equal heights at all time.
Any advice would help me greatly and I will be very thankful!
UPDATE!
Added the prefixes for IE (but still not working)
body {
margin: 0;
padding: 0;
height: 100%;
}
#page-wrapper {
background: tomato;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
height: 100%;
}
#left-panel {
background: skyblue;
width: 250px;
height:2000px;
}
#wrapper {
background: aquamarine;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
#header {
height: 60px;
background: lightblue;
}
#footer {
height: 40px;
background: lightgreen;
}
<body>
<div id="page-wrapper">
<div id="left-panel">
panel should expand vertically
</div>
<div id="wrapper">
<div id="header">
Header should expand horizontally
</div>
<div id="main">
content should expand vertically and horizontally
</div>
<div id="footer">
Footer should expand horizontally
</div>
</div>
</div>
</body>
Click to see what I am getting on IE
Related
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>
I am trying to create a scrollable file tree. Minimal code can be found below.
https://jsfiddle.net/3kLmchot/1/
Problem is when I try to add overflow-y: scroll;, to the filebrowse-outer div, the first few items are not visible at all. This problem gets worse when I add more divs.
It seems like items are added about the center of the filebrowse-outer div, so the items that are added at the bottom can be found via scrolling, but the items that are added at the top are invisible. (see the visual aid below)
item 1
item 2
center of the div
item 3
item 4
Scroll bar forms at around item 2, which makes item 1 invisible. Does anyone know why this is happening, and potential solutions?
I got it to work with the following styles, specifically removing justify-content: center; from your .flex-container that is being used by multiple divs and only applying it to the one that is for .flex-container.filebrowse-inner
.side-bar {
position: fixed;
width: 20%;
height: 200px;
display: flex;
flex-direction: column;
}
.flex-container {
display: flex;
/* justify-content: center; <-- THIS LINE IS CAUSING THE ISSUE */
align-items: center;
}
.flex-container.filebrowse-outer {
flex-direction: column;
border: 1px solid #f00;
overflow-y: scroll;
align-items: stretch;
}
.flex-container.filebrowse-inner {
flex-direction: row;
justify-content: center;
width: 100%;
padding-bottom: 15px;
text-align: left;
position: relative;
}
/* .display-container {
width: 70%;
overflow: auto;
} */
I think that you meant to have scroll bar in the external div with class 'side-bar', if yes:
.side-bar {
position: fixed;
width: 20%;
height: 200px;
display: flex;
flex-direction: column;
overflow-y:scroll;
}
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.flex-container.filebrowse-outer {
flex-direction: column;
border: solid;
min-height: max-content; /* For safari*/
/* overflow-y: scroll; */
align-items: stretch;
}
.flex-container.filebrowse-inner {
flex-direction: row;
width: 100%;
min-height: max-content; /* For safari*/
padding-bottom: 15px;
text-align: left;
position: relative;
}
.display-container {
width: 70%;
overflow: auto;
}
<div class="side-bar">
<div class="flex-container filebrowse-outer">
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 1!</p>
</div>
</div>
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 2!</p>
</div>
</div>
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 3!</p>
</div>
</div>
<div class="flex-container filebrowse-inner">
<div class="display">
<p>Click Me 4!</p>
</div>
</div>
</div>
</div>
You can then move the border to 'side-bar' class.
I'm working on a page that has a header nav, then two rows of banner images, then a couple more divs below the banners.
What I'd like to achieve is to have the nav div be a set height (90px) and then have the two rows of banners evenly split the remaining viewport height of the user's browser. Then, have the two divs below the banners also be fixed pixel heights.
Here's a snippet of my stripped down code:
html, body {
margin: 0;
padding: 0;
}
.nav {
background: red;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
.banners-row-1 {
background: green;
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
}
.banners-row-2 {
background: orange;
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
}
.mailing-list {
height: 115px;
background: pink;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
height: 117px;
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
<div class="nav">
This is the nav
</div>
<div class="banners-row-1">
Banners Row 1
</div>
<div class="banners-row-2">
Banners Row 2
</div>
<div class="mailing-list">
Mailing List
</div>
<div class="footer">
Footer
</div>
As you can see, the two banner rows are set to 50vh, which is close to what I want - but, is there a way to somehow incorporate the 90px nav div when the banner divs calculate the viewport height?
Essentially, what I'm after is something along the lines of 50% of 'viewport height minus 90px'...?
Thanks
Wrap your nav and banners to wrapper and use following flex properties:
html, body {
margin: 0;
padding: 0;
}
.nav {
background: red;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}
.wrap {
display: flex;
flex-direction: column;
height: 100vh;
}
.ban {
flex: 1;
}
.banners-row-1 {
background: green;
display: flex;
justify-content: center;
align-items: center;
}
.banners-row-2 {
background: orange;
display: flex;
justify-content: center;
align-items: center;
}
.mailing-list {
height: 115px;
background: pink;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
height: 117px;
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
<div class="wrap">
<div class="nav">
This is the nav
</div>
<div class=" ban banners-row-1">
Banners Row 1
</div>
<div class="ban banners-row-2">
Banners Row 2
</div>
</div>
<div class="mailing-list">
Mailing List
</div>
<div class="footer">
Footer
</div>
It works, because space in .wrap is splitted like:
.nav has fixed 90px
.bans have equal left space (100vh - 90px) / 2
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
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;
}
Is it possible to use flexbox to center vertically and horizontally for background color purposes?
.wrapper {
display: flex;
width: 100vw;
height: 100vh;
text-align: center;
}
.item {
flex: 1;
background-color: green;
align-self: center;
justify-content: center;
}
<div class='wrapper'>
<div class='item'>
sdafsdfs
</div>
</div>
If I add a height: 100% the text moves back to the top.
Add display: flex for your items. Then only it can align items inside it as per your requirements. Please have a look at the updated code.
.wrapper {
display: flex;
width: 100vw;
height: 100vh;
text-align: center;
}
.item {
display: flex;
background-color: green;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
<div class='wrapper'>
<div class='item'>
sdafsdfs
</div>
</div>
Hope this help