Compare example below on chrome and firefox.
It wraps properly on chrome for me, but firefox instead of wrapping, stretches flexbox and overflows parent. So who is right here, chrome or firefox? And how can I achieve same effect as on chrome on both?
html,
body,
#app {
margin: 0;
padding: 0;
}
#app {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}
#top {
flex: 0 0 40px;
background-color: #ff0000;
}
#content {
flex: 1;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.item {
height: 200px;
}
<div id="app">
<div id="top">
</div>
<div id="content">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
<div class="item">
5
</div>
<div class="item">
6
</div>
</div>
</div>
Try setting a min-height and min-width on parent like so
#content {
min-height: 0;
min-width: 0; }
Related
I'm trying to build two column layout using flexbox css. Page should consist of header, sidebar, content area and footer.
One of the requirement is for a page to consume whole browser window space but not overflow it. Overflow could, however, happen in separate sections (like in this case - sidebar).
So I've decided to use flexbox for layout, however can't figure out how to make sidebar scrollable if it's content is bigger than place given to it by the layout engine.
I've built an example to better explain my problem. When there is not too much content (content size is smaller than the container), everything looks as expected:
html,
body {
height: 100%;
margin: 0;
}
.block {
border: 1px solid grey;
}
.container {
display: flex;
flex-flow: column;
height: 100%;
}
.container > .header {
flex: 0 1 auto;
height: 65px;
}
.container > .content {
display: flex;
flex: 1 1 auto;
flex-direction: row;
}
.container > .content > .page {
flex: 1 1 auto;
}
.container > .content > .sidebar {
flex: 0 1 auto;
width: 250px;
overflow: scroll;
}
.container > .footer {
flex: 0 1 auto;
height: 150px;
}
<body>
<div class="container">
<div class="block header">
<p>
<b>Header</b>
</p>
</div>
<div class="content">
<div class="block sidebar">
<p>
<b>Sidebar</b>
</p>
</div>
<div class="block page">
<p>
<b>Content</b>
</p>
</div>
</div>
<div class="block footer">
<p>
<b>Footer</b>
</p>
</div>
</div>
</body>
But if, for example, sidebar's content size is bigger than the sidebar itself, the footer gets pushed down and it causes the whole page to overflow the browser window size:
html,
body {
height: 100%;
margin: 0;
}
.block {
border: 1px solid grey;
}
.container {
display: flex;
flex-flow: column;
height: 100%;
}
.container > .header {
flex: 0 1 auto;
height: 65px;
}
.container > .content {
display: flex;
flex: 1 1 auto;
flex-direction: row;
}
.container > .content > .page {
flex: 1 1 auto;
}
.container > .content > .sidebar {
flex: 0 1 auto;
width: 250px;
overflow: scroll;
}
.container > .footer {
flex: 0 1 auto;
height: 150px;
}
<body>
<div class="container">
<div class="block header">
<p>
<b>Header</b>
</p>
</div>
<div class="content">
<div class="block sidebar">
<p>
<b>Sidebar</b>
</p>
<div style="background-color: blue; height: 800px;"></div>
</div>
<div class="block page">
<p>
<b>Content</b>
</p>
</div>
</div>
<div class="block footer">
<p>
<b>Footer</b>
</p>
</div>
</div>
</body>
How I could fix this problem and force sidebar to add scrolling behaviour when content doesn't fit the container rather than expand the container?
Add overflow-y: auto;, this will solve your problem.
In my situation I'm not able to apply flex to the body tag. Can I achieve the same effect (sticky header/footer with the flexbox taking up the full screen) without applying css to the body tag. Here is the relevant code. I commented out the body css that achieves the effect I want.
Thanks,
Matt
/*html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
*/
.flex-body {
min-height: 100%;
display: flex;
flex-direction:column;
}
.main {
display: flex;
flex: 1 0 auto;
}
.nav {
flex: 0 0 12em;
}
.content {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex: 1 0 auto;
flex-direction: row;
}
.col {
flex: 1 0 auto;
}
/* TEMP CODE FOR THIS TEST, REMOVE FOR ACTUAL USE
*/
body {
text-align: center;
}
*{
box-shadow:inset 0px 0px 0px 1px #f00;
}
<div class="flex-body">
<header class="header">
<section class="content">
<div class="row">
<div class="col">
Upper Left
</div>
<div class="col">
Upper Middle
</div>
<div class="col">
Upper Right
</div>
</div>
</section>
</header>
<main class="main">
<nav class="nav">
Nav
</nav>
<section class="content">
<div class="row">
<div class="col">
Upper Left
</div>
<div class="col">
Upper Middle
</div>
<div class="col">
Upper Right
</div>
</div>
<div class="row">
Middle
</div>
<div class="row">
Lower
</div>
</section>
</main>
<footer class="footer">Footer</footer>
</div>
you can also imbricate flex boxe and use flex shorthands to fill entire parent's height or width . But this means to include html & body .
This way you do need to deal with height/width and margins/paddings. The browser will deal with it itself.
html {
height: 100%;
display: flex;
flex-direction: column;
}
body,
.flex-body {
display: flex;
flex: 1;/* no need anymore to deal with height/width */
flex-direction: column;
}
.main {
display: flex;
flex: 1;
/* mind this */
/*overflow:auto; */ /* can come handy here if you want to keep footer in view */
}
.nav {
flex: 0 0 12em;
}
.content {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex: 1 0 auto;
flex-direction: row;
}
.col {
flex: 1 0 auto;
}
/* TEMP CODE FOR THIS TEST, REMOVE FOR ACTUAL USE
*/
body {
text-align: center;
}
* {
box-shadow: inset 0px 0px 0px 1px #f00;
}
<div class="flex-body">
<header class="header">
<section class="content">
<div class="row">
<div class="col">
Upper Left
</div>
<div class="col">
Upper Middle
</div>
<div class="col">
Upper Right
</div>
</div>
</section>
</header>
<main class="main">
<nav class="nav">
Nav
</nav>
<section class="content">
<div class="row">
<div class="col">
Upper Left
</div>
<div class="col">
Upper Middle
</div>
<div class="col">
Upper Right
</div>
</div>
<div class="row">
Middle
</div>
<div class="row">
Lower
</div>
</section>
</main>
<footer class="footer">Footer</footer>
</div>
Add a min-height of 100vh to the flex container:
.flex-body {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
Then it will be at least as tall as the browser’s viewport (but will be allowed to grow taller if necessary).
How can I fix the max-height of the "content" div. The code works only under Chrome :/
the "content" div should not expand outside the bottom of the window. the items should wrap to the right.
item1 item4 item7
item2 item5 ...
item3 item6
html
<div class="top">
<div class="title">Title</div>
</div>
<div class="wrapper">
<div class="left">
<div class="link">Link</div>
</div>
<div class="content">
<div class="item">Item1</div>
<div class="item">Item2</div>
<div class="item">Item3</div>
<div class="item">Item4</div>
<div class="item">Item5</div>
<div class="item">Item6</div>
<div class="item">Item7</div>
<div class="item">Item8</div>
<div class="item">Item9</div>
<div class="item">Item10</div>
<div class="item">Item11</div>
<div class="item">Item12</div>
<div class="item">Item13</div>
<div class="item">Item14</div>
<div class="item">Item15</div>
<div class="item">Item16</div>
<div class="item">Item17</div>
<div class="item">Item18</div>
<div class="item">Item19</div>
</div>
</div>
</div>
css
html, body { height: 100%; margin: 0px; padding: 0px }
.main {
height: 100%;
max-heigth: 100%; /* not required under chrome, do not works for others */
display: flex;
flex-direction: column;
background-color: red;
color: white;
}
.wrapper {
flex: 1 1 auto;
display: flex;
background-color: silver;
}
.left {
width: 50px;
background-color: lightblue;
}
.content {
flex:1;
display: flex;
flex-flow: column wrap; /* warp only under Chrome */
}
https://jsfiddle.net/L7zzucms/
Change your wrapper rule to this and it works everywhere (tested on Chrome,Firefox,Edge,IE11)
.wrapper {
height: 100%;
display: flex;
background-color: silver;
}
Updated fiddle
I suppose the flex: 1 in content need a height, other than flex: 1 1 auto, from its parent to be able to wrap properly
I have been trying to horizontally center these 3 items using flexbox, yet without success. They all need to be of the same width.
HTML:
<div id="contact_flex_container">
<div id="fb">
<img src="img/contact/fb.png" class="contact_img">
<h3>Title1</h3>
</div>
<div id="yt">
<img src="img/contact/yt.png" class="contact_img">
<h3>Title2</h3>
</div>
<div id="mail">
<img src="img/contact/mail.png" class="contact_img">
<h3>Title3</h3>
</div>
</div>
CSS:
#contact_flex_container {
display: flex;
flex-flow: row wrap;
text-align: center;
background-color: red;
width: auto;
justify-content: space-around;
}
.contact_img {
width: 40px;
height: 40px;
}
#fb {
flex-basis: 0;
flex-grow: 1;
}
#yt {
flex-basis: 0;
flex-grow: 1;
}
#mail {
flex-basis: 0;
flex-grow: 1;
}
I have also tried setting margin-left and right to auto for each child, justify-content to center for the container, even combined with fixed width of the container in pixels, yet nothing seems to work. To be more specific, justify-content does not seem to work at all here, whatever value I put there. What am I missing or doing wrong?
The flex properties you are assigning to the flex-items make them all as large as they can be (in this case 33% of the container).
Just remove them, then change the parent to justify-content:center.
#contact_flex_container {
display: flex;
flex-flow: row wrap;
text-align: center;
background-color: red;
width: auto;
justify-content: center
}
.contact_img {
width: 40px;
height: 40px;
}
#fb {} #yt {} #mail {}
<div id="contact_flex_container">
<div id="fb">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Title1</h3>
</div>
<div id="yt">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Title2</h3>
</div>
<div id="mail">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Title3</h3>
</div>
</div>
Alternative, based on the expanded requirement.
An extra wrapper is required which should be inline-flex.
#contact_flex_container {
display: flex;
flex-flow: row wrap;
text-align: center;
background-color: red;
width: auto;
justify-content: center
}
.wrap {
display: inline-flex;
}
.wrap > div {
flex: 1;
border: 1px solid grey;
}
.contact_img {
width: 40px;
height: 40px;
}
<div id="contact_flex_container">
<div class="wrap">
<div id="fb">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Lorem ipsum dolor sit.</h3>
</div>
<div id="yt">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Lorem ipsum.</h3>
</div>
<div id="mail">
<img src="http://lorempixel.com/image_output/abstract-q-c-50-50-5.jpg" class="contact_img">
<h3>Lorem</h3>
</div>
</div>
I have three divs in a column. Each div has content that should scroll if it overflows. I would like each div to have the same height, with the max height of each div to be the height of its content. Is this possible to implement using flexbox?
Jsfiddle: http://jsfiddle.net/x6puccbh/2/
As you can see in the fiddle, all three sections are the same height, but I would like the middle section to be only as tall as its content.
<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>
.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%;
}
does this work for you?
<div class="section">
<div class="header">HEADER</div>
<p>content sjkdkjasdn asjn dvas jkdb ajd avsd</p>
</div>
css
.section:nth-child(2) {
height:unset;
}
p {
padding-bottom: 5em;
}
here's a fork of the fiddle
Use this:
height: fit-content;
Can you use link:
https://caniuse.com/?search=fit-content