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
Related
firstly sorry for my English,
I ask me if we can change the style of a last child in flex div when this one goes to the line (wrap).
What I want precisely is to modify the last child (.flexChild in demo) to change the justify-content at space-around or to add padding when the user is on mobile or he resize the window
(without mediaqueries)
DEMO Here
.parent {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
height: 100px;
background: red;
}
.child {
padding: 0 20px;
background: green;
border: 1px solid black;
}
.flexChild {
background: yellow;
display: flex;
min-width: 200px;
flex-wrap: wrap;
flex: 1 1 auto;
justify-content: space-between;
}
<div class="parent">
<div class="child">
Testtestesttest
</div>
<div class="child">
testtesttestt
</div>
<div class="child">
testesttestest
</div>
<div class="child flexChild">
<div class="left">
<button>1</button>
<button>2</button>
</div>
<div class="right">
<button>3</button>
</div>
</div>
</div>
I'm trying to hide part of the div underneath another.
https://jsfiddle.net/71obhkzh/7/ shows what I have now.
<div>
some stuff here
</div>
<div id="container">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
<div>
some stuff here
</div>
#container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 300px;
}
#top {
height:100px;
width: 100px;
background-color: red;
}
#bottom {
height:100px;
width: 120px;
background-color: blue;
margin-top: -40px;
}
In the fiddle I used the negative margin-top to move the blue div up a bit, but it covers the bottom of the red div. I need the red one to be on top of blue one like this https://awwapp.com/b/unzo2gs6g/
Ok, if I add the z index as suggested it works on the fiddle, but in real app the colors are mixed like here
http://i67.tinypic.com/34pets8.png
I'm using bootstrap and the reality is bit more complicated (flex boxes in the top and bottom div with more content). I tried to set opacity on the top div but it did not help
real code (login container is the red one, info the blue one)
<div class="container">
<div class="row justify-content-center login-container">
<div class="col-6 login-box">login form here</div>
<div class="col-4 register-box">register box here</div>
</div>
<div class="d-flex justify-content-center info-container">
<div id="advantages" class="d-flex flex-column justify-content-center align-items-center">
some text
</div>
<div id="image" class="d-flex flex-column justify-content-center align-items-center">
<img src="some image"/>
</div>
</div>
</div>
https://jsfiddle.net/71obhkzh/31/
Make use of z-index.
#container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 300px;
}
#top {
height:100px;
width: 100px;
background-color: red;
z-index: 2
}
#bottom {
height:100px;
width: 200px;
background-color: blue;
margin-top: -40px;
z-index: 1
}
<div>
some stuff here
</div>
<div id="container">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
<div>
some stuff here
</div>
Use z-index to do that:
#container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 300px;
}
#top {
height:100px;
width: 100px;
background-color: red;
z-index:2;
}
#bottom {
height:100px;
width: 120px;
background-color: blue;
margin-top: -40px;
z-index:1;
}
<div>
some stuff here
</div>
<div id="container">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
<div>
some stuff here
</div>
I am trying to achieve the following layout for a navigation bar with Flexbox. I am stuck with the alignment of the divs. This is how it should like:
This is what i build up with Divs and CSS. But i dont know how to align those divs, so that i get the desired result.
Fiddle
* {
box-sizing: border-box;
}
#nav {
display: flex;
}
#logo {
width: 100px;
heigth: 100px;
background-color: black;
margin-left: 24px;
}
<div id="nav">
<div id="logo">
100x100px Logo
</div>
<div id="left_side">
<div id="top_nav">
<div id="title">TITLE OF PAGE</div>
<div id="menu_swith">SWITCH</div>
</div>
<div id="bottom_nav">
<div class="nav_item">Menu 1</div>
<div class="nav_item">Menu 2</div>
<div class="nav_item">Menu 3</div>
<div class="nav_item">Menu 4</div>
</div>
</div>
</div>
I would add a few more flex containers to some of the child divs. I'd also specify the width and flex-direction on the #left_side div and justify the content on the #top_nav div.
Try the snippet below or see this updated fiddle:
* {
box-sizing: border-box;
}
#nav,
#left_side,
#top_nav,
#bottom_nav {
display: flex;
}
#left_side {
flex-direction: column;
width: 100%;
}
#top_nav {
justify-content: space-between;
}
#logo {
width: 100px;
heigth: 100px;
background-color: black;
margin-left: 24px;
}
<div id="nav">
<div id="logo">
100x100px Logo
</div>
<div id="left_side">
<div id="top_nav">
<div id="title">TITLE OF PAGE</div>
<div id="menu_swith">SWITCH</div>
</div>
<div id="bottom_nav">
<div class="nav_item">Menu 1</div>
<div class="nav_item">Menu 2</div>
<div class="nav_item">Menu 3</div>
<div class="nav_item">Menu 4</div>
</div>
</div>
</div>
There are many good guides to flexbox available. This one is very good: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Your layout can be achieved by adding the following CSS
fiddle
* {
box-sizing: border-box;
}
#nav {
display: flex;
}
#logo {
width: 100px;
height: 100px;
background-color: black;
margin-left: 24px;
}
#left_side {
display: flex;
flex-direction: column;
flex: 1;
}
#top_nav {
display: flex;
justify-content: space-between;
flex: 1;
}
#bottom_nav {
display: flex;
flex: 1;
}
<div id="nav">
<div id="logo">
100x100px Logo
</div>
<div id="left_side">
<div id="top_nav">
<div id="title">TITLE OF PAGE</div>
<div id="menu_swith">SWITCH</div>
</div>
<div id="bottom_nav">
<div class="nav_item">Menu 1</div>
<div class="nav_item">Menu 2</div>
<div class="nav_item">Menu 3</div>
<div class="nav_item">Menu 4</div>
</div>
</div>
</div>
Flexbox is one way to build the layout. You'll need extra containers to make it work.
However, if you want to keep it really simple, use CSS Grid:
header {
display: grid;
grid-template-columns: 100px 3fr 1fr;
grid-template-rows: 50px 50px;
grid-template-areas: " logo title switch "
" logo nav nav ";
}
#logo { grid-area: logo; }
#title { grid-area: title; }
#menu_switch { grid-area: switch; }
nav { grid-area: nav; display: flex; }
nav > a {
flex: 0 0 75px;
margin: 5px;
border: 2px solid green;
}
/* for demo only */
#logo { background-color: lightgray; }
#title { background-color: pink; }
#menu_switch { background-color: skyblue; }
nav { background-color: lightgreen; }
* { box-sizing: border-box; }
div, a { display: flex; align-items: center; justify-content: center;
text-align: center; }
<header>
<div id="logo">100x100px<br>Logo</div>
<div id="title">Page Title</div>
<div id="menu_switch">Switch</div>
<nav>
<a class="nav_item">Menu 1</a>
<a class="nav_item">Menu 2</a>
<a class="nav_item">Menu 3</a>
<a class="nav_item">Menu 4</a>
</nav>
</header>
jsFiddle demo
For an explanation of the grid rules above and browser support data, see these posts:
CSS-only masonry layout but with elements ordered horizontally
Browser support for CSS Grid
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; }
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