I have two "Splits" that are using flex-grow to either be 100% if only one is present or a 50%/50% if both are present. The issue is I would like for this behavior to be dependent on the presence of content within the div.splits.
Through some fiddling I can either get it to do the proper expanded heights or the proper removal of content, but not both at the same time.
The content DOM structure really needs to remain the same. Maybe adding an additional wrapper would be ok if need be. I am trying to resolve this with a pure CSS solution if possible.
JS Bin Code Snippet
CSS:
body {
border: 1px solid black;
display: flex;
width: 100vw;
}
section {
display: flex;
flex-direction: column;
width: 100vw;
}
.split {
width: 100vw;
display: flex;
flex: 1;
}
.content {
/* probably something here? */
}
/*-------------- Non pertinent styles -----------------*/
.pink { text-align: center; background-color: pink; }
.blue { text-align: center; background-color: turquoise; }
nav { background-color: steelblue; }
HTML:
<body>
<section>
<div class="split pink">
<!-- If I remove this <h1> I would like for
the behavior to be the same as if I
removed this .pink.split div from the DOM -->
<h1 class="content">A</h1>
</div>
<nav> Some Nav </nav>
<div class="split blue">
<h2 class="content">B</h2>
</div>
</section>
</body>
As the JSBin demo fills the viewport, there is 2 solutions for solving this.
The solution to the inline code, where the section doesn't fill the viewport.
You should use flex-grow: 1;, not flex: 1, as with flex: 1, which is the same as flex: 1 1 0, the flex-basis is 0, and when, the flex items will flex-grow based on their content is 0, hence take equal space.
Alternatively you could use flex: 1 1 auto.
Src: https://www.w3.org/TR/css-flexbox-1/#flex-common
Stack snippet - with content
body {
border: 1px solid black;
box-sizing: border-box;
display: flex;
}
section {
display: flex;
flex-direction: column;
width: 100%;
}
.split {
display: flex;
flex-grow: 1; /* or "flex: 1 1 auto" */
}
/*-------------- Non pertinent styles -----------------*/
.pink { text-align: center; background-color: pink; }
.blue { text-align: center; background-color: turquoise; }
nav { background-color: steelblue; }
<section>
<div class="split pink">
<!-- If I remove this <h1> I would like for
the behavior to be the same as if I
removed this .pink.split div from the DOM -->
<h1 class="content">A</h1>
</div>
<nav> Some Nav </nav>
<div class="split blue">
<h2 class="content">B</h2>
</div>
</section>
Stack snippet - without content
body {
border: 1px solid black;
box-sizing: border-box;
display: flex;
}
section {
display: flex;
flex-direction: column;
width: 100%;
}
.split {
display: flex;
flex-grow: 1; /* or "flex: 1 1 auto" */
}
/*-------------- Non pertinent styles -----------------*/
.pink { text-align: center; background-color: pink; }
.blue { text-align: center; background-color: turquoise; }
nav { background-color: steelblue; }
<section>
<div class="split pink">
<!-- If I remove this <h1> I would like for
the behavior to be the same as if I
removed this .pink.split div from the DOM -->
</div>
<nav> Some Nav </nav>
<div class="split blue">
<h2 class="content">B</h2>
</div>
</section>
The solution for the JSBin, where the section fill the viewport
Use the :empty selector, and when the split is empty, change it to flex: 0.
Stack snippet - with content
body {
border: 1px solid black;
box-sizing: border-box;
display: flex;
margin: 0;
height: 100vh;
}
section {
display: flex;
flex-direction: column;
width: 100%;
}
.split {
display: flex;
flex: 1;
}
.split:empty {
flex: 0;
}
/*-------------- Non pertinent styles -----------------*/
.pink { text-align: center; background-color: pink; }
.blue { text-align: center; background-color: turquoise; }
nav { background-color: steelblue; }
<section>
<div class="split pink">
<!-- If I remove this <h1> I would like for
the behavior to be the same as if I
removed this .pink.split div from the DOM -->
<h1 class="content">A</h1>
</div>
<nav> Some Nav </nav>
<div class="split blue">
<h2 class="content">B</h2>
</div>
</section>
Stack snippet - without content
body {
border: 1px solid black;
box-sizing: border-box;
display: flex;
margin: 0;
height: 100vh;
}
section {
display: flex;
flex-direction: column;
width: 100%;
}
.split {
display: flex;
flex: 1;
}
.split:empty {
flex: 0;
}
/*-------------- Non pertinent styles -----------------*/
.pink { text-align: center; background-color: pink; }
.blue { text-align: center; background-color: turquoise; }
nav { background-color: steelblue; }
<section>
<div class="split pink"></div>
<nav> Some Nav </nav>
<div class="split blue">
<h2 class="content">B</h2>
</div>
</section>
Related
I am working on a project which requires some basic HTML/CSS. I have a code pen which may be easier to visualize: https://codepen.io/Sean713/pen/yLEZVEe
My objective is to make the innerBottomHalf element expand to fully fill the bottomHalf element (barring any padding). I would also like the navbar + wholePage element to take up the full VH.
I currently have it set so that the wholePage takes up the full VH, I'm not sure how to subtract the navbar height from this.
I also see that my innerBottomHalf expands outside of my BottomHalf, I do not know why this is, because I've set its height to be 100%.
I tried a lot of solutions online, the GPT chatbot, and prodding around with the code, but have been unable to figure it out. I appreciate any help.
My code is as follows:
ul {
list-style-type: none;
display: flex;
align-items: center;
}
li a {
display: block;
text-align: center;
padding: 10px 15px;
text-decoration: none;
}
div {
padding: 10px;
}
.wholePage {
background-color: blue;
display: flex;
flex-direction: column;
height: 100vh;
}
.topHalf {
background-color: purple;
display: flex;
justify-content: space-between;
}
.bottomHalf {
background-color: grey;
height: 100%;
}
.innerBottomHalf {
background-color: brown;
height: 100%;
}
.topLeftHalf {
background-color: green;
flex: 1;
height: 50vh;
}
.topRightHalf {
background-color: orange;
flex: 1;
height: 50vh;
}
<ul>
<li><a>Solve</a></li>
<li><a>About</a></li>
<li><a>Other</a></li>
</ul>
<div class="wholePage">
<div class="topHalf">
<div class="topLeftHalf">
This is the top left
</div>
<div class="topRightHalf">
This is the top right
</div>
</div>
<div class="bottomHalf">
This is the bottom half
<div class="innerBottomHalf">
This is the inner bottom half
</div>
</div>
</div>
With height: 100% on nested elements you'll get an overflow because there are heights from other elements being added. Instead of percentage heights, just use flex properties all the way.
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0; /* remove default margins */
}
.wholePage {
background-color: blue;
display: flex;
flex-direction: column;
/* height: 100vh; */
flex: 1; /* new */
}
.bottomHalf {
background-color: grey;
/* height: 100%; */
display: flex;
flex-direction: column;
flex: 1;
}
.innerBottomHalf {
background-color: brown;
/* height: 100%; */
flex: 1;
}
/* no adjustments below this line */
ul {
list-style-type: none;
display: flex;
align-items: center;
}
li a {
display: block;
text-align: center;
padding: 10px 15px;
text-decoration: none;
}
div {
padding: 10px;
}
.topHalf {
background-color: purple;
display: flex;
justify-content: space-between;
}
.topLeftHalf {
background-color: green;
flex: 1;
height: 50vh;
}
.topRightHalf {
background-color: orange;
flex: 1;
height: 50vh;
}
<ul>
<li><a>Solve</a></li>
<li><a>About</a></li>
<li><a>Other</a></li>
</ul>
<div class="wholePage">
<div class="topHalf">
<div class="topLeftHalf">
This is the top left
</div>
<div class="topRightHalf">
This is the top right
</div>
</div>
<div class="bottomHalf">
This is the bottom half
<div class="innerBottomHalf">
This is the inner bottom half
</div>
</div>
</div>
I'm facing this problem where I want to have a header, sidebar and content with flexbox. I can't get to a solution to divide these 3 childs. I've been trying to use flex-grow and flex-direction:row but I'm having a problem.
Image of the website
How I want it to be
<style>
.parent {
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
height: 100vh;
border: 20px solid black;
display: flex;
flex-direction: column;
}
.header {
width: 200px;
height: 200px;
background: cornflowerblue;
}
.side {
width: 200px;
height: 200px;
background: rgb(219, 133, 133);
}
.content {
width: 200px;
height: 200px;
background: rgb(115, 202, 180);
}
.text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 190px;
color: #fff;
}
</style>
<div class="parent">
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
You need to create two containers, one for all your elements and one for your header and content.
<div class="parent"> <!-- Container 1 -->
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="container"> <!-- Container 2 -->
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
</div>
Then, you can treat each container as a separate flex-box. the parent will have a flex-direction: row; and the container will have flex-direction: column;.
You also want to set values in percentages, not absolute values as you have right now (200px, 20rem..).
.parent {
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100vh;
border: 20px solid black;
display: flex;
flex-direction: row;
}
.header {
height: 30%;
background: cornflowerblue;
}
.side {
width: 30%;
height: 100%;
background: rgb(219, 133, 133);
}
.content {
height: 70%;
background: rgb(115, 202, 180);
}
.text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 190px;
color: #fff;
}
.container {
display: flex;
flex-direction: column;
width: 70%;
height: 100%;
}
JSFiddle
Images to illustrate the separation:
You have to wrap your header & content section inside another div. Something like this below example. However, The best way to achieve this layout is using a CSS grid. Here is the complete CSS grid guide
.parent {
display: flex;
height: 100vh;
background: #000;
padding: 5px;
margin: 0;
}
.side {
border: 1px solid #000;
width: 30vw;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
margin-right: 5px;
}
.main-body {
border: 1px solid #000;
width: 70vw;
}
.header,
.content {
display: flex;
justify-content: center;
background: #fff;
}
.header {
height: 25vh;
margin-bottom: 5px;
}
.content {
align-items:center;
height: 70vh;
}
<div class="parent">
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="main-body">
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
</div>
I don't think that you deeply understand how flexbox work. You should read more about it. I advice you to read a book called CSS-in Depth. You can download it online from a website called Z-lib. Try to understand the code that I posted for you.
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.parent {
height: 100vh;
border: 20px solid black;
display: flex;
background: pink;
}
.main {
display: flex;
backgound-color: green;
flex-direction: column;
flex: 2
}
.header {
background: cornflowerblue;
}
.side {
flex: 1;
background: rgb(219, 133, 133);
}
.content {
background: rgb(115, 202, 180);
flex: 1
}
.text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 190px;
color: #fff;
}
</style>
<div class="parent">
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="main">
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</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 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'm trying to get a flexbox working inside a flexbox. While the first (wrapping) flexbox works, the one inside does nothing. Is there anyway to get this to work?
What I'm looking to do is effectively have two sticky footers and have the height of both reach the the footers.
html, body {
height: 100%;
margin: 0; padding: 0; /* to avoid scrollbars */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#body {
flex: 1;
border: 1px solid orange;
height: 100%:
}
#wrapper2 {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column;
}
#body2 {
border: 1px solid purple;
flex: 1;
}
#footer2 {
background: red;
flex: 0;
}
#footer{
background: lime;
}
<div id="wrapper">
<div id="body">Bodyof<br/>
variable<br/>
height<br/>
<div id="wrapper2">
<div id="body2">
blah
</div>
<div id="footer2">
blah<br />
blah
</div>
</div>
</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>
JS Fiddle
You were almost there. Just two steps away:
Make #body a flex container.
Give .wrapper2 full height with flex: 1.
(I also got rid of percentage heights. You don't need them.)
body {
margin: 0;
}
#wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#header {
background: yellow;
height: 100px;
}
#body {
flex: 1;
border: 1px solid orange;
display: flex; /* new */
flex-direction: column; /* new */
}
#wrapper2 {
display: flex;
flex-direction: column;
flex: 1; /* new */
}
#body2 {
border: 1px solid purple;
flex: 1;
}
#footer2 {
background: red;
}
#footer {
background: lime;
}
<div id="wrapper">
<div id="body">
Bodyof
<br>variable
<br>height
<br>
<div id="wrapper2">
<div id="body2">blah</div>
<div id="footer2">
blah
<br>blah
</div>
</div>
</div>
<div id="footer">
Footer
<br>of
<br>variable
<br>height
<br>
</div>
</div>
jsFiddle
Once the adjustments above are made, you can pin the inner (red) footer to the bottom with:
flex: 1 on #body2, which is what you have, or
margin-bottom: auto on #body2, or
margin-top: auto on #footer2, or
justify-content: space-between on the container (#wrapper2)