I'm trying to create element div that contain 3 part, using 2 row and 2 column.
.flex-row {
flex-direction: row;
display: flex;
width: 310px;
}
.flex-column {
flex-direction: column;
display: flex;
}
.flex-body {
display: flex;
margin: 40px 10px 0px 0px;
}
.flex-body div:not([class*="flex"]) {
border: 1px solid white;
flex: 1 1 260px;
width: 764px;
}
<div class="flex-body">
<div class="flex-row">
<div style="background: #0980cc;"></div>
</div>
<div class="flex-column">
<div style="background: #09cc69;"></div>
<div style="background: #cc092f;"></div>
</div>
</div>
I set the width because if I didn't do it, the width wouldn't fit page.
But the div isn't responsive. I've tried but nothing work. How can I make my div responsive the screen resolution?
I've just created a version that uses percentages:
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
.flex-body {
display: flex;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 40px;
}
.flex-body div:not([class*="flex"]) {
border: 1px solid white;
flex: 1 1 50%;
position: relative;
box-sizing: border-box;
}
.flex-row {
flex-direction: row;
display: flex;
width: 35%;
background-color: #0980cc;
}
.flex-column {
flex-direction: column;
display: flex;
width: 65%;
}
.flex-column div:nth-child(1) {
background: #09cc69;
width: 100%;
}
.flex-column div:nth-child(2) {
background: #cc092f;
width: 100%;
}
jsfiddle link
Related
This question already has answers here:
CSS: Width in percentage and Borders
(5 answers)
Closed 3 years ago.
I want to create a bar to go along the top of a box on a website that I am working on.
This is the desired outcome
Here's my code, I keep getting this overlap
.page {
display: flex;
flex-wrap: wrap;
position: relative;
}
.section {
border: 2px solid #FBA7FF;
width: 85%;
height: 30%;
margin: 1vw;
padding: 1vw;
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.section h1 {
position: relative;
}
.section_header {
border: 4px solid #FBA7FF;
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 95%;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
So far I've got the parent div with position: relative and the child element with position: absolute then setting top and left to 0 width to 100% and bottom to 95% to attempt the desired effect yet it creates an overlap.
I can see that 0 is within the div and doesn't take into account the border which is perhaps why this is happening.
* {
box-sizing: border-box;
margin: 0;
}
.page {
display: flex;
flex-wrap: wrap;
position: relative;
}
.section {
width: 100%;
display: inline-block;
text-align: center;
}
.section_header {
width: 100%;
background: #FBA7FF;
display: block;
height: 70px;
margin-bottom: 20px;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
Remove the position:absolute and use flex-direction:column;
* {
margin: 0;
padding: 0;
}
.page {
display: flex;
flex-wrap: wrap;
flex-direction: column;
min-height: 100vh;
background: lightgrey;
position: relative;
}
.section {
border: 2px solid #FBA7FF;
width: 85%;
margin: 1vh auto;
height: 30%;
background: lightgreen;
display: flex;
flex-direction: column;
flex: 1;
align-items: center;
}
.section_header {
height: 50px;
width: 100%;
background: orange;
}
<div class='page'>
<div class='section'>
<div class="section_header"></div>
<h1>sample text</h1>
</div>
</div>
I'm trying to make an overlap form div (blue) by activity-indicator div (yellow). Both containers should fill all available spaces of parent div, but yellow one (activity indicator) should overlap blue one (input form). I've tried to use position: absolute for activity div, but then I'm loosing parent width and height. What I'm doing wrong and how can it be fixed?
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
background-color: aquamarine;
display: flex;
align-items: center;
justify-content: center;
}
.root-wrapper {
width: 300pt;
height: 440pt;
display: flex;
flex-direction: column;
background-color: gray;
}
.logo {
height: 80pt;
background-color: green;
}
.content-container {
display: flex;
flex-direction: column;
flex: 1 1 auto;
background-color: lightcoral;
padding: 20pt;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.input-form {
position: relative;
flex: 1 1 auto;
background-color: rgb(60, 109, 173);
z-index: 2;
}
.activity-indicator {
position: relative;
flex: 1 1 auto;
background-color: yellow;
z-index: 9;
}
<div class="root-wrapper">
<div class="logo"> </div>
<div class="content-container">
<div class="activity-indicator">
</div>
<div class="input-form">
</div>
</div>
An easy way would be to nudge .input-form up with:
position: relative;
top: -100px;
margin-bottom: -100px;
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
background-color: aquamarine;
display: flex;
align-items: center;
justify-content: center;
}
.root-wrapper {
width: 300pt;
height: 440pt;
display: flex;
flex-direction: column;
background-color: gray;
}
.logo {
height: 80pt;
background-color: green;
}
.content-container {
display: flex;
flex-direction: column;
flex: 1 1 auto;
background-color: lightcoral;
padding: 20pt;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.input-form {
position: relative;
top: -100px;
margin-bottom: -100px;
flex: 1 1 auto;
background-color: rgba(60, 109, 173, .5);
z-index: 10;
}
.activity-indicator {
position: relative;
flex: 1 1 auto;
background-color: yellow;
z-index: 9;
}
<div class="root-wrapper">
<div class="logo"> </div>
<div class="content-container">
<div class="activity-indicator">
</div>
<div class="input-form">
</div>
</div>
First of all, the first snippet below is the problem I'm trying to fix.
Note that this was working perfectly fine IF display: flex; is applied to body.
However, I do not want to apply style to body which will break Google Web Cache layout.
* More explanation after the first snippet
* { box-sizing: border-box; }
body { margin: 0; }
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
background-color: #ccc;
}
.navigation {
background-color: #f00;
width: 100%;
height: 3rem;
}
.footer {
background-color: #0f0;
width: 100%;
text-align: center;
line-height: 2rem;
}
.content {
background-color: #ff0;
flex: 1;
margin: 0.6rem 0 1.2rem;
}
.container {
background-color: #f0f;
margin: 0 auto;
max-width: 120rem;
width: 100%;
padding: 0 2rem;
}
.centered {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.long-content {
background-color: #fff;
}
<main class="wrapper">
<nav class="navigation">.navigation</nav>
<div class="content">
<section class="container centered">
<div class="long-content">.long-content</div>
</section>
</div>
<footer class="footer">.footer</footer>
</main>
So, removing display: flex; raised this issue:
section within .content does not have the height spanning across .content
Trying to fix it with position: relative on .content and position: absolute on .centered fixed the height issue but raised:
Width of .centered does not span across .content which can be easily fixed with left:0;right:0;
Height does not flow with content in section (I'm out of idea here)
Was it wrong to use position: relative and position: absolute to patch the original issue?
If so, what is the more suitable solution?
* { box-sizing: border-box; }
body { margin: 0; }
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
background-color: #ccc;
}
.navigation {
background-color: #f00;
width: 100%;
height: 3rem;
}
.footer {
background-color: #0f0;
width: 100%;
text-align: center;
line-height: 2rem;
}
.content {
background-color: #ff0;
flex: 1;
margin: 0.6rem 0 1.2rem;
position: relative;
}
.container {
background-color: #f0f;
margin: 0 auto;
max-width: 120rem;
width: 100%;
padding: 0 2rem;
}
.centered {
display: flex;
position: absolute;
height: 100%;
left: 0;
right: 0;
align-items: center;
justify-content: center;
}
.long-content {
background-color: #fff;
height: 1000px;
}
<main class="wrapper">
<nav class="navigation">.navigation</nav>
<div class="content">
<section class="container centered">
<div class="long-content">.long-content</div>
</section>
</div>
<footer class="footer">.footer</footer>
</main>
I continued looking for solution and quickly noticed that I have shallow knowledge about flexbox itself so I went ahead and played with Flexbox Froggy.
After completing all the levels, I noticed that I can align everything without position: absolute by just using justify-content on .wrapper.
Below is my solution for my silly issue.
If you remove height of .long-content, .centered will continue to get aligned vertically.
Thank you froggies and shout out to Codepip!
* { box-sizing: border-box; }
body { margin: 0; }
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
background-color: #ccc;
justify-content: space-between;
}
.navigation {
background-color: #f00;
width: 100%;
height: 3rem;
}
.footer {
background-color: #0f0;
width: 100%;
text-align: center;
line-height: 2rem;
}
.content {
background-color: #ff0;
margin: 0.6rem 0 1.2rem;
}
.container {
background-color: #f0f;
margin: 0 auto;
max-width: 120rem;
width: 100%;
padding: 0 2rem;
}
.centered {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.long-content {
background-color: #fff;
height: 1000px;
}
<main class="wrapper">
<nav class="navigation">.navigation</nav>
<div class="content">
<section class="container centered">
<div class="long-content">.long-content</div>
</section>
</div>
<footer class="footer">.footer</footer>
</main>
I want to do something like that with flexbox:
.wrap {
display: flex;
flex-wrap: wrap;
}
.elem1 {
width: 20%;
height: 100px;
border: 1px solid red;
}
.elem2, .elem3 {
width: 75%;
border: 1px solid red;
}
<div class="wrap">
<div class="elem1">1</div>
<div class="elem2">2</div>
<div class="elem3">3</div>
</div>
JSFIDDLE
Switch to flex-direction: column.
Add flex-wrap: wrap.
Define a height for the container (so the flex items know where to wrap).
Box #1 will consume all space in the first column, forcing the following boxes to wrap to a new column.
No changes to the HTML.
.wrap {
display: flex;
flex-wrap: wrap;
flex-direction: column; /* NEW */
height: 100px; /* NEW */
justify-content: space-between; /* NEW */
}
.elem1 {
width: 20%;
flex-basis: 100%; /* NEW */
border: 1px solid red;
}
.elem2,
.elem3 {
width: 75%;
flex-basis: 40%; /* NEW */
border: 1px solid red;
}
<div class="wrap">
<div class="elem1">1</div>
<div class="elem2">2</div>
<div class="elem3">3</div>
</div>
Something like this maybe (tweak values as desired):
1. Using your height (100px) & widths (20% & 75%):
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.wrap {
height: 100px;
display: flex;
flex-flow: row wrap;
}
.row {
width: 75%;
display: flex;
flex-flow: column wrap;
}
.elem1 {
width: 20%;
border: 1px solid lightgray;
}
.elem2 {
height: 50%;
border: 1px solid lightgray;
flex: 1;
margin: 10px;
}
.elem3 {
height: 50%;
border: 1px solid lightgray;
flex: 1;
margin: 10px;
}
<div class="wrap">
<div class="elem1">1</div>
<div class="row">
<div class="elem2">2</div>
<div class="elem3">3</div>
</div>
</div>
2. Full width & height option:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.wrap {
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.row {
width: 80%;
display: flex;
flex-flow: column wrap;
}
.elem1 {
width: 20%;
border: 1px solid lightgray;
}
.elem2 {
height: 50%;
border: 1px solid lightgray;
flex: 1;
}
.elem3 {
height: 50%;
border: 1px solid lightgray;
flex: 1;
}
<div class="wrap">
<div class="elem1">1</div>
<div class="row">
<div class="elem2">2</div>
<div class="elem3">3</div>
</div>
</div>
I have an HTML page with header/content/footer that uses flexbox model and contains <details> tag.
I need to make details content use maximum available height, meaning that when in opened state its content should occupy all space in its container (except for summary of course).
Here is my HTML/CSS code (http://jsfiddle.net/rtojycvk/2/):
HTML:
<div class="wrapper">
<div class="header">Header</div>
<div class="main">
Some text before details
<details class="details" open>
<summary>Details summary</summary>
<div class="content">Details content</div>
</details>
</div>
<div class="footer">Footer</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0; padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
}
.header {
height: 50px;
background-color: yellow;
flex: 0 0 auto;
}
.main {
background-color: cyan;
flex: 1;
display: flex;
flex-direction: column;
}
.footer {
height: 50px;
background-color: green;
flex: 0 0 auto;
}
.content {
background-color: blue;
color: white;
flex: 1;
}
.details {
background-color: red;
flex: 1;
display: flex;
flex-direction: column;
}
As you can see, the details tag itself takes all the available space, but not its content.
P.S. I need this to work only in Chrome.
http://jsfiddle.net/rtojycvk/16/
use position absolute on content, position relative on details, and calc() css (to offset the summary height)
.content {
background-color: lightgray;
color: black;
flex: 1;
display:flex;
position:absolute;
height: calc(100% - 18px);
width: 100%;
}
.details {
background-color: gray;
flex: 1;
display: flex;
flex-direction: column;
position:relative;
}
hope this helps! (I changed the colors cause they were a bit bright for me :p)
Absolute positioned .content and details relative.
fiddle
html, body {
height: 100%;
margin: 0; padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
}
.header {
height: 50px;
background-color: yellow;
flex: 0 0 auto;
}
.main {
background-color: cyan;
flex: 1;
display: flex;
flex-direction: column;
}
.footer {
height: 50px;
background-color: green;
flex: 0 0 auto;
}
.content {
background-color: blue;
color: white;
flex: 1;
position: absolute;
top: 3%;
bottom: 0;
height: 97%;
width: 100%;
}
details {
position: relative;
}
summary{
height: 3%;
}
.details {
background-color: red;
flex: 1;
display: flex;
flex-direction: column;
}
For those who prefer not to set absolutes positions, or can't do it, there is another way to accomplish it: using vh for height of .content:
html,
body {
margin: 0;
padding: 0;
height:100vh;
background: orange;
}
.wrapper {
display: flex;
flex-direction: column;
width: 100%;
height:100vh;
background: pink;
}
.header,
.footer {
height: 10vh;
min-height: 25px; /* (or max-height, or both!) */
max-height: 50px;
background-color: yellow;
flex: 0 0 auto;
}
.footer {
background-color: green;
}
.main {
background-color: cyan;
flex: 1;
display: flex;
flex-direction: column;
height: calc(100vh - 20vh); /* 10vh * 2 (.header + .footer sizes) */
}
.content {
background-color: blue;
color: white;
flex: 1;
display: flex;
flex-direction: column;
height: calc(100vh - 20vh); /* 10vh * 2 (.header + .footer sizes) */
}
.details {
background-color: red;
flex: 1;
display: flex;
flex-direction: column;
}
<div class="wrapper">
<header class="header">Header</header>
<main class="main">
Some text before details
<details class="details" open>
<summary>Details summary</summary>
<div class="content">Details content</div>
</details>
</main>
<footer class="footer">Footer</footer>
</div>
Fiddle's here: http://jsfiddle.net/ALXWebDev/wxm0v49c/
Hope it helps!