EDIT: This may be a problem with Safari 14.0.x for macOS.
I’m trying to make the .block element in the middle .flex-item span the full height of its parent, but it instead just collapses.
body {
height: calc(100vh - 2 * 4px);
margin: 4px;
}
div {
box-sizing: border-box;
border-width: 0.8vh;
border-style: solid;
padding: 2vh;
}
.flex {
height: 100%;
border-color: red;
display: flex;
flex-direction: column;
}
.flex-item {
border-color: blue;
}
.box {
height: 15vh;
border-color: green;
padding: 0;
}
.flex-item:last-child > .box {
height: 8vh;
}
.grow {
flex-grow: 1;
}
.grow > .box {
height: 100%;
}
<div class="flex">
<div class="flex-item">
<div class="box"></div>
</div>
<div class="flex-item grow">
<div class="box two"></div>
</div>
<div class="flex-item">
<div class="box"></div>
</div>
</div>
I could edit the last of the code to what’s below to make it work, but I’d rather not have one child be displayed as flex while the others are displayed as block. Is there another way I could go about doing this?
.grow {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.grow > .box {
flex-grow: 1;
}
body {
height: calc(100vh - 2 * 4px);
margin: 4px;
}
div {
box-sizing: border-box;
border-width: 0.8vh;
border-style: solid;
padding: 2vh;
}
.flex {
height: 100%;
border-color: red;
display: flex;
flex-direction: column;
}
.flex-item {
border-color: blue;
}
.box {
height: 15vh;
border-color: green;
padding: 0;
}
.flex-item:last-child > .box {
height: 8vh;
}
.grow {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.grow > .box {
flex-grow: 1;
}
<div class="flex">
<div class="flex-item">
<div class="box"></div>
</div>
<div class="flex-item grow">
<div class="box"></div>
</div>
<div class="flex-item">
<div class="box"></div>
</div>
</div>
You could set it as follow:
.grow {
flex-grow: 1;
height: 100%;
}
.grow > .box {
height: 100%;
}
This does seem to the trick for me in Safari.
If you don't want to use flexbox on the .grow element.
Related
I am having problems with flexbox layout parenting a child control.
html, body, .frame{
margin: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
.frame{
display: flex;
flex-flow: column;
}
.header{
background-color: yellow;
height: 40px;
}
.body-outer{
background-color: green;
flex: 1;
display: flex;
flex-flow: column;
}
.body-inner{
border: 1px solid red;
flex: 1;
}
.big-text{
height: 2000px;
border: 1px solid lightblue;
overflow: auto;
margin: 5px;
}
<div class="frame">
<div class="header">header</div>
<div class="body-outer">
<div>subheader</div>
<div class="body-inner>">
<div class="big-text">big text</div>
</div>
</div>
</div>
The 'body-inner' div is meant to fill the remaining space with flex: 1 and the 'big-text' is supposed to fill the whole space of 'body-inner' without expanding it but showing scroll bars.
You have the overflow applied to the content. It should be applied to the container that will be overflowed.
Also, you need a fixed height, so that the overflow property has something to overflow.
Try this:
.frame {
display: flex;
flex-flow: column;
height: 100vh;
}
.header {
background-color: yellow;
height: 40px;
}
.body-outer {
height: calc(100vh - 40px); /* new */
background-color: green;
/* flex: 1; */
display: flex;
flex-flow: column;
}
.body-inner {
border: 1px solid red;
flex: 1;
overflow: auto; /* moved here */
}
.big-text {
height: 2000px;
border: 1px solid lightblue;
/* overflow: auto; */
margin: 5px;
}
body {
margin: 0;
}
* {
box-sizing: border-box;
}
<div class="frame">
<div class="header">header</div>
<div class="body-outer">
<div>subheader</div>
<div class="body-inner">
<div class="big-text">big text</div>
</div>
</div>
</div>
I want to create a layout where we have a header (responsive, with any height), footer (responsive, with any height), and content that fills the rest of space. Content should have two columns - first(right) that fits the content and second(left) that is very long and should have overflow with y-axis scrolling.
Detailed snipped with HTML and CSS attached.
I have problem with making them work inside of flexible height. I know how to make it work when I have only two columns, but with a responsive footer and header, I have problems.
I also have a code snippet inside of codepen
Thanks in advance for any help :)
html,
body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.column {
background-color: white;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
color: black;
border: 5px purple solid;
}
.column-with-overflow {
overflow: auto;
max-height: 100%;
flex-grow: 1;
}
.column-with-overflow-content {
height: 1000px;
background-color: blue;
display: flex;
}
.columns {
display: flex;
flex-direction: row;
background-color: yellow;
width: 100%;
max-height: 100%;
}
.content {
background-color: blue;
flex-grow: 1;
}
.box {
text-align: center;
color: white;
display: flex;
justify-content: center;
}
.header {
background-color: green;
height: 60px; // assume that It's not known - any height
}
.footer {
background-color: red;
height: 60px; // assume that It's not known - any height
}
<div class="container">
<div class="box header">Header</div>
<div class="box content">
<div class="columns">
<div class='column column-with-overflow'>
<div class='column-with-overflow-content'>
box 1
</div>
</div>
<div class='column'>box 2</div>
</div>
</div>
<div class="box footer">Footer</div>
</div>
Set a fixed height to your .box.content div element.
And use min-height in .column-with-overflow-content insted of height
html,
body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.column {
background-color: white;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
color: black;
border: 5px purple solid;
}
.column-with-overflow {
overflow: auto;
max-height: 100%;
flex-grow: 1;
}
.column-with-overflow-content {
min-height: 1000px; /* use min-height */
background-color: blue;
display: flex;
}
.columns {
display: flex;
flex-direction: row;
background-color: yellow;
width: 100%;
max-height: 100%;
}
.content {
background-color: blue;
flex-grow: 1;
}
.box.content { height: 100px; } /* set height to columns container */
.box {
text-align: center;
color: white;
display: flex;
justify-content: center;
}
.header {
background-color: green;
height: 60px; // assume that It's not known - any height
}
.footer {
background-color: red;
height: 60px; // assume that It's not known - any height
}
<div class="container">
<div class="box header">Header</div>
<div class="box content">
<div class="columns">
<div class='column column-with-overflow'>
<div class='column-with-overflow-content'>
box 1
</div>
</div>
<div class='column'>box 2</div>
</div>
</div>
<div class="box footer">Footer</div>
</div>
I have the following layout that I'm trying to achieve with flex, but just can't seem to get it:
* {
box-sizing: border-box;
}
.box {
border: 1px solid black;
width: 50%;
padding-top: 25%;
float: left;
}
.box:first-child {
padding-top: 50%;
}
.box:nth-last-child(-n+2) {
width: 25%;
}
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
If I try to use flex-direction row, it wraps the last two boxes under the first left box
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box {
border: 1px solid black;
width: 50%;
padding-top: 25%;
}
.box:first-child {
padding-top: 50%;
}
.box:nth-last-child(-n+2) {
width: 25%;
}
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
If I use flex direction column, I get closer but have to set a height which means I lose responsiveness
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height:400px;
width:100%;
}
.box {
border: 1px solid black;
width: 50%;
padding-top: 25%;
}
.box:first-child {
padding-top: 50%;
}
.box:nth-last-child(-n+2) {
width: 25%;
}
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Is there a way to achieve this layout using flex without having a fixed height or changing the html structure?
Using flexbox you can consider some hack to approximate this. One trick is to have two rows (keep the row direction) and use negative margin on the first element to make it overlap the second row:
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box {
outline: 1px solid black;
width: 50%;
padding-top: 25%;
}
.box:first-child {
padding-top: 25%;
margin-bottom:-25%;
}
.box:nth-last-child(-n+2) {
width: 25%;
}
.box:nth-child(3) {
margin-left:auto;
}
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
I need to have a 100% height flexbox with just a children footer with 50px.
Is possible without have the calc(100% - 50px) ?
here my try:
body, html{
height:100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
background-color:red;
}
.flex-1 {
background-color: yellow;
}
.flex-A {
background-color: blue;
display: flex;
flex-direction: column;
height: 100%;
}
.flex-1-child {
background-color: purple;
overflow-y: auto;
height: calc(100% - 50px);
}
.flex-2-child {
background-color: green;
height: 50px;
}
.text{
height: 500px;
}
<div class="container">
<div class="flex-1">test</div>
<div class="flex-A">
<div class="flex-1-child">
<div class="text">test2</div>
</div>
<div class="flex-2-child">
<div>test</div>
</div>
</div>
</div>
I don't have the 100% height.
Thank you for your help.
Change height: calc(100% - 50px); to flex: 1; and it will expand its height maximally.
I guess this is what you want?
https://jsfiddle.net/shuding/3ss44wuk/1
Simply use flex: 1 on the dynamic element.
body, html{
height:100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
background-color:red;
}
.flex-1 {
background-color: yellow;
}
.flex-A {
background-color: blue;
display: flex;
flex-direction: column;
height: 100%;
}
.flex-1-child {
background-color: purple;
overflow-y: auto;
flex: 1;
}
.flex-2-child {
background-color: green;
height: 50px;
}
.text{
height: 500px;
}
<div class="container">
<div class="flex-1">test</div>
<div class="flex-A">
<div class="flex-1-child">
<div class="text">test2</div>
</div>
<div class="flex-2-child">
<div>test</div>
</div>
</div>
</div>
I have such code:
https://plnkr.co/edit/ZAEzfAOCO0ZcSq2OR4Lp?p=preview
but this isn't working in ie, until I add height:0 (it's a very bad idea on parent element)
<body>
<div class="container">
<div class="container-item container-item-1"></div>
<div class="container-item container-item-2"></div>
<div class="container-item container-item-3"></div>
</div>
</body>
body, html {
min-height: 100%;
height: 100%;
}
.container {
width: 100%;
min-height: calc(100% - 80px);
margin: 30px;
padding: 20px;
border: 1px solid gray;
border-radius: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.container-item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
content: "someText";
border-bottom: 1px solid #cecece;
}
.container-item-1 {
background-color: red;
}
.container-item-2 {
background-color: orange;
}
.container-item-3 {
background-color: green;
}
everything works fine in chrome and ff
(my parents should expand to fit parent)
Important!
I need a flexible solution, my code can have a lot of nested div's (not a constant value) between body and content divs.
for example:
<body>
<div>
<div>
<div class="container">
<div class="container-item container-item-1"></div>
<div class="container-item container-item-2"></div>
<div class="container-item container-item-3"></div>
</div>
</div>
</div>
</body>
or
<body>
<div>
<h3>text</h3>
<div class="container">
<div class="container-item container-item-1"></div>
<div class="container-item container-item-2"></div>
<div class="container-item container-item-3"></div>
</div>
</div>
</body>
If you have an unknown or nested markup before the container, you could add an extra wrapper within it (here inner), to overcome IE's min-height bug.
Fiddle sample 1 -- Fiddle sample 2
Stack snippet sample 1
html, body {
margin: 0;
}
.container {
display: flex;
}
.container .inner {
width: 100%;
min-height: calc(100vh - 100px);
margin: 30px;
padding: 20px;
border: 1px solid gray;
border-radius: 16px;
display: flex;
flex-direction: column;
}
.container-item {
flex-grow: 1;
border: 1px solid #cecece;
}
.container-item-1 {
background-color: red;
}
.container-item-2 {
background-color: orange;
}
.container-item-3 {
background-color: green;
}
<div>
<h3>text</h3>
<div class="container">
<div class="inner">
<div class="container-item container-item-1">
</div>
<div class="container-item container-item-2">
</div>
<div class="container-item container-item-3">
</div>
</div>
</div>
</div>
Stack snippet sample 2
html, body {
margin: 0;
}
.container {
display: flex;
}
.container .inner {
width: 100%;
min-height: calc(100vh - 100px);
margin: 30px;
padding: 20px;
border: 1px solid gray;
border-radius: 16px;
display: flex;
flex-direction: column;
}
.container-item {
flex-grow: 1;
border: 1px solid #cecece;
}
.container-item-1 {
background-color: red;
}
.container-item-2 {
background-color: orange;
}
.container-item-3 {
background-color: green;
}
<div>
<div>
<div class="container">
<div class="inner">
<div class="container-item container-item-1">
</div>
<div class="container-item container-item-2">
</div>
<div class="container-item container-item-3">
</div>
</div>
</div>
</div>
</div>