First I create a layout using flexbox:
<html>
<body>
<div id="header"></div>
<div id="main"></div>
</body>
</html>
header div has a fixed height: 60px, and main div takes the remaining height of screen:
html, body{
100%;
}
body{
display: flex;
flex-direction: column;
}
#header{
height: 60px;
flex-grow: 0;
}
#main{
flex-grow: 1;
}
I got what I want:
Then I want to display three boxes inside #main div: box_1, box_2 and box_3.
box_1 and box_3 has the same height value, and box_2 expand itself to take the remaining height of #main:
I add the following codes:
<html>
<body>
<div id="header"></div>
<div id="main">
<div id="box_1"></div>
<div id="box_2"></div>
<div id="box_3"></div>
</div>
</body>
</html>
#main{
flex-grow: 1;
flex-direction: column;
}
#box_1, #box_3{
height: 60px;
flex-grow: 0;
background-color: red;
}
#box_2{
flex-grow: 1;
background-color: blue;
}
The #box_2 is invisible unless I set a height value to #main div. If height value is required, why should I still use flexbox...
The main problem in your code is that you didn't specify display: flex on the #main container.
Therefore, the element is not a flex container, flex-direction: column is ignored, and the children are not flex items.
Keep in mind that flex properties work only between parent and child elements. So your display: flex on the body element applies only to the children, but not other descendants.
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
header {
flex: 0 0 60px; /* flex-grow, flex-shrink, flex-basis */
background-color: lightgray;
}
main {
flex-grow: 1;
background-color: aqua;
display: flex; /* key addition */
flex-direction: column;
}
#box_1, #box_3 {
flex: 0 0 60px;
background-color: red;
}
#box_2 {
flex-grow: 1;
background-color: blue;
}
<header></header>
<main>
<div id="box_1"></div>
<div id="box_2"></div>
<div id="box_3"></div>
</main>
Related
I have a flex (column) container (.parent) with two elements inside it (.row-1, .row-2). The first element .row-1 has a fixed height and flex-shrink equals to 1. The second row .row-2 has a flex-grow set to 1. Additionally, the second row has a child element with height equals to 100%. The expected behavior is that the child element (.child) becomes the same height as its parent (i.e., .row-2), which it does in Chrome and Firefox. However, in Safari the child element .child has a height of 0 instead. Am I missing something here?
Here is the code I have:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
}
.parent {
display: flex;
flex-direction: column;
background: red;
height: 100vh;
}
.row-1 {
flex-shrink: 1;
height: 40px;
background: green;
}
.row-2 {
flex-grow: 1;
background: yellow;
}
.child {
background: cyan;
height: 100%;
}
</style>
</head>
<body>
<div class="parent">
<div class="row-1"></div>
<div class="row-2">
<div class="child"></div>
</div>
</div>
</body>
</html>
The only way I could get round the problem of the child element not taking on the full height of row-2 in Safari was to force row-2 also to be flex and set align-items: stretch which seems to get inherited by the child OK if you take the height: 100% out. BUT I had to set the width: 100% in this case otherwise it just seemed to be auto.
Sorry I can't explain this behavior and the fix may not suit all use cases but here it is:
* {
margin: 0;
padding: 0;
}
.parent {
display: flex;
flex-direction: column;
background: red;
height: 100vh;
}
.row-1 {
flex-shrink: 1;
height: 40px;
background: green;
}
.row-2 {
display: flex;
flex-grow: 1;
background: yellow;
align-items: stretch
}
.child {
background: cyan;
width: 100%;
}
<div class="parent">
<div class="row-1"></div>
<div class="row-2">
<div class="child">child div</div>
</div>
</div>
I have setup the following layout. The content__item elements (which are commented below) are overflowing vertically outside main container.
.root {
display: flex;
height: 100vh;
background-color: gray;
}
.nav {
width: 16rem;
background-color: red;
}
.main {
flex-grow: 1;
background-color: green;
}
.menu {
height: 4rem;
background-color: blue;
}
.content {
display: flex;
height: 100%;
padding: 2rem;
}
.content__item {
flex: 1;
margin-left: 1rem;
background-color: white;
}
<div className="root">
<nav className="nav"></nav>
<main className="main">
<div className="menu"></div>
<div className="content">
<!-- Overflowing -->
<div className="content__item"></div>
<div className="content__item"></div>
<div className="content__item"></div>
</div>
</main>
</div>
I am pretty sure its a flexbox bug. I tried using min-height: 0 on the container but it still doesn't work. I setup an environment here for reference.
The reason the content_items are overflowing is because height: 100% causes problems with flex. However if you remove that, the elements don't appear to fill the available height. This is because their parent (the content div) is not the child of a flex element, so it is in fact this element and not the content__item that isn't taking up the available height.
We can fix this by adding display:flex to the main div (the parent of content)... however now we have another problem! This makes the other child of content (the nav element) appears to the side. To fix this, we can use flex-direction: column;
The main changes you need to make this work as as follows:
.main {
flex-grow: 1; /* you already have this to allow the children grow */
display: flex; /* Add this so the content element can use the full height */
flex-direction: column; /* Add this to make the children stack one below another */
}
.content {
display: flex; /* you already had this */
flex:1; /* Add this to make it take up the available height */
}
.content__item {
flex: 1; /* You don't actually need this now */
}
Working Example:
Also FYI, you need to set the body margin to 0 - otherwise the 100vh extends larger than the screen as it is getting added to the default margin.
body { margin:0; }
.root {
display: flex;
height: 100vh;
background-color: gray;
}
.nav {
width: 16rem;
background-color: red;
}
.main {
flex-grow: 1;
background-color: green;
display:flex;
flex-direction:column;
}
.menu {
height: 4rem;
background-color: blue;
}
.content {
display: flex;
padding: 2rem;
flex:1;
}
.content__item {
margin-left: 1rem;
background-color: white;
}
<div class="root">
<nav class="nav"></nav>
<main class="main">
<div class="menu"></div>
<div class="content">
<!-- Overflowing -->
<div class="content__item">some text here</div>
<div class="content__item">some text here</div>
<div class="content__item">some text here</div>
</div>
</main>
</div>
body, html {
margin: 0;
}
.root {
display: flex;
height: 100vh;
background-color: gray;
}
.nav {
width: 16rem;
background-color: red;
}
.main {
flex-grow: 1;
background-color: green;
display: flex;
flex-direction: column;
}
.menu {
height: 4rem;
background-color: blue;
}
.content {
display: flex;
padding: 2rem;
flex: 1;
}
.content__item {
flex: 1;
margin-left: 1rem;
background-color: white;
}
<div class="root">
<nav class="nav"></nav>
<main class="main">
<div class="menu"></div>
<div class="content">
<!-- Overflowing -->
<div class="content__item">a</div>
<div class="content__item">b</div>
<div class="content__item">c</div>
</div>
</main>
</div>
I have the following code structure
.parent {
display: flex;
flex-direction: column;
}
.img {
width: 100%
}
.content {
flex: 1;
overflow-y: scroll;
}
.container {
border: 1px solid;
display: flex;
flex-direction:column;
margin:20px;
}
<div class="parent">
<img src="https://www.everythingcarers.org.au/media/1982/sample.jpg"/>
<div class="content">
</div>
<div class="footer">
<div class="container">
<div><button>Button1</button><div>
<div><button>Button2</button><div>
</div>
</div>
</div>
What I want is the footer to occupy its original width and height(height: 144px) , and make the content scrollable based on the available space according to screen resolution.Currently, the footer is getting cut off on some screens. I've tried changing the flex values for content and footer, but it doesn't work.Thanks
If you want to limit your parent to the height of the screen so the footer is always visible, you need to set a height of 100% on your div (and body and html) and also move the image inside your content container (or have a seperate one that will scroll if it too large for the screen)
body,
html {
margin: 0;
height: 100%;
}
.parent {
height: 100%;
display: flex;
flex-direction: column;
}
img {
display:block;
width: 100%
}
.content {
flex: 1;
overflow-y: scroll;
}
.container {
border: 1px solid;
display: flex;
flex-direction: column;
margin: 20px;
}
<div class="parent">
<div class="content">
<img src="https://www.everythingcarers.org.au/media/1982/sample.jpg" />
</div>
<div class="footer">
<div class="container">
<div><button> Button1 </button></div>
<div><button> Button2 </button></div>
</div>
</div>
</div>
I think setting your parent height to 100vh and giving your footer a fixed height should fix it:
https://codepen.io/chrishalley/pen/zbwRMw
body {
margin: 0;
}
.parent {
display:flex;
flex-direction:column;
background-color: orangered;
height: 100vh;
}
.content {
flex: 1;
overflow-y: scroll;
}
img {
width: 300px;
}
.footer {
height: 144px;
}
I´m building a sidebar using CSS flex and I need it to grow vertically to fill the whole screen vertical height. Here is a skeleton of what I´m doing.
JSFiddle here
.app {
display: flex;
flex-direction: row;
. align-items: flex-start;
height: 100%;
width: 100%;
}
.sidebar {
background-color: red;
height: 100%;
}
.content {
width: 100%;
display: flex;
flex-direction: column;
}
.content-header {
flex: 1;
background-color: grey;
}
.content-main {
flex: 1;
background-color: yellow;
}
<div class='app'>
<div class='sidebar'>
This is sidebar
</div>
<div class='content'>
<div class='content-header'>
Content Header
</div>
<div class='content-main'>
This is the main content
</div>
</div>
</div>
I think I got it pretty close by assigning the full viewport height to your container and then removing flex: 1 from .content children.
.app {
display: flex;
flex-direction: row;
. align-items: flex-start;
height: 100vh;
width: 100%;
}
.sidebar {
background-color: red;
}
.content {
width: 100%;
display: flex;
flex-direction: column;
}
.content-header {
background-color: grey;
}
.content-main {
background-color: yellow;
}
<div class='app'>
<div class='sidebar'>
This is sidebar
</div>
<div class='content'>
<div class='content-header'>
Content Header
</div>
<div class='content-main'>
This is the main content
</div>
</div>
</div>
body, html {
height: 100%;
}
And the fiddle
https://jsfiddle.net/gxkezny9/
One of the parent containers wasn't 100% height
The proper usage of Flexbox, is to make the app take full height by either use height: 100vh, or give html/body a height, html, body { height: 100% } so the app's height work as expected.
Second, as you use align-items: flex-start all items will initially align at the top, but by adding align-self: stretch to the sidebar, it will fill its parent's height.
Note, for flex row item you should not use height: 100%, you should use the align-* properties.
Note 2, the set flex: 1 on content-header and content-main doesn't have any affect, unless their parent content has a height higher than their summed height. i.e. if to change the app's align-items to stretch (and if, the align-self on sidebar can be removed)
Note 3, the flex: 1 won't work properly in IE, use flex-grow: 1 instead, or assign all values, where flex-basis should be auto, i.e. flex: 1 1 auto
Stack snippet
body {
margin: 0;
}
.app {
display: flex;
flex-direction: row;
align-items: flex-start;
height: 100vh; /* changed */
width: 100%;
}
.sidebar {
background-color: red;
align-self: stretch; /* added */
}
.content {
width: 100%;
display: flex;
flex-direction: column;
}
.content-header {
flex: 1; /* for IE, "flex-grow: 1" or "flex: 1 1 auto"
*/
background-color: grey;
}
.content-main {
flex: 1; /* for IE, "flex-grow: 1" or "flex: 1 1 auto"
*/
background-color: yellow;
}
<div class='app'>
<div class='sidebar'>
This is sidebar
</div>
<div class='content'>
<div class='content-header'>
Content Header
</div>
<div class='content-main'>
This is the main content
</div>
</div>
</div>
I am using flexbox layout to position three divs in a column so that each div has the same height. Each div displays a scrollbar if its content is too large. I would like each section to only expand to the height of its content, but currently what happens is that every section is always the same height regardless of the content in it.
If the container is 900px, each section should be 300px, and if the content of a section is more than 300px tall, a scroll bar should appear. However, if the content of lets say the middle section is only 100px tall, that section should only be 100px, and the remaining sections should fill in the remaining space, so they would each be 400px tall.
Example: http://jsfiddle.net/x6puccbh/2/
As you can see in this example, the middle section is the same height as the other sections, but I would like it to only be as tall as its content. Is this possible using flex layout?
<div class="container">
<div class="panel">
<div class="section">
<div class="header">HEADER</div>
<div class="content">content<br>content<br>content<br>content
<br>content<br>content<br>content<br>content
<br>content<br>content<br>content<br>content</div>
</div>
<div class="section">
<div class="header">HEADER</div>
<div class="content">content</div>
</div>
<div class="section">
<div class="header">HEADER</div>
<div class="content">content<br>content<br>content<br>content
<br>content<br>content<br>content<br>content
<br>content<br>content<br>content<br>content
</div>
</div>
</div>
</div>
.container {
height: 300px;
}
.panel {
display:flex;
flex-direction: column;
height: 100%;
}
.header {
height: 15px;
text-align: center;
flex-shrink: 0;
}
.section {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
height: 100%;
border: 1px solid red;
display: flex;
flex-direction: column;
}
.content {
overflow-y: auto;
height: 100%;
}
If you change your heights to auto I think it does what you are asking. Example and current code below. Let me know if that's not what you were going for
http://plnkr.co/edit/MMjXmANacvZvHofXzYoL
.container {
height: 300px;
}
.panel {
max-height: 100%;
display:flex;
flex-direction: column;
}
.header {
height: 15px;
text-align: center;
flex-shrink: 0;
}
.section {
border: 1px solid red;
display: flex;
flex-direction: column;
max-height: 33%;
flex-grow: 1;
}
.content {
overflow-y: auto;
}
Try setting a max-height property on the container you don't want to get too big but use a vh rather than a % (as in 75vh not 75%).