This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
Closed 5 years ago.
I am new to flexbox, but I have a parent div which contains three child divs. The three child divs are each 100% width. The first two divs are a fixed height. I want the third child div to fill out the rest of the parent div.
* {
margin: 0;
}
.flex-container {
display: flex;
height: 300px;
flex-wrap: wrap;
border: 1px solid blue;
background-color: gray;
align-content: flex-start;
}
.flex-item1 {
width: 100%;
height: 10px;
background: yellow;
}
.flex-item2 {
width: 100%;
height: 10px;
border: 1px solid red;
background: red;
}
.flex-item3 {
width: 100%;
border: 3px solid purple;
background: purple;
align-self: stretch;
height: auto;
}
/* another attempt for the third child div */
/* .flex-item3{
width: 100%;
border: 3px solid purple;
background: purple;
flex-direction: row;
flex-grow: 1;
} */
<div class="flex-container">
<div class="flex-item1"></div>
<div class="flex-item2"></div>
<div class="flex-item3"></div>
</div>
I have made a jsFiddle here.
Can anyone tell me what I'm doing wrong?
EDIT
I am trying not to make the flex-direction: column since I would like the third child div to be a row.
use flex:1 in the 3rd item and flex-direction:column in parent
.flex-container {
display: flex;
flex-direction: column;
height: 300px;
width: 100%
}
.flex-item1 {
height: 10px;
background: yellow;
}
.flex-item2 {
height: 10px;
background: red;
}
.flex-item3 {
flex: 1;
background: blue
}
<div class="flex-container">
<div class="flex-item1"></div>
<div class="flex-item2"></div>
<div class="flex-item3"></div>
</div>
Related
I'm wondering how I can make the blue div 'stick' to the top and bottom of the page (so you can't scroll beyond it) without breaking the document flow (I don't want it to overlap the content div). A crude version is here in the code snippet. If I set 'absolute' on it, it breaks flow and the content goes under the menu. If I leave it relative, you can scroll beyond it (I want it to stay at top: 0, bottom: 0 for a full 100vh with its own scrolling).
Is there something that I'm missing?
* {
box-sizing: border-box;
}
.main {
display: flex;
flex-direction: row;
}
.sideNav {
width: 100px;
height: 100vh;
border: 5px solid red;
}
.sidePanel {
width: 50px;
height: 100vh;
border: 5px solid blue;
}
.content {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 200vh;
margin: auto;
width: auto;
border: 5px solid green;
}
<div class="main">
<div class="sideNav">Side Nav</div>
<div class="content">This is the content area</div>
<div class="sidePanel">Side Panel</div>
</div>
You really can't do it without removing it from the document flow.
But if you know the width of the side panel, you can apply it as a right margin to the content div.
.main {
display: flex;
flex-direction: row;
}
.sideNav {
width: 100px;
height: 100vh;
border: 5px solid red;
}
.sidePanel {
width: 50px;
height: 100vh;
border: 5px solid blue;
position: fixed; /* new */
right: 0; /* new */
}
.content {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 200vh;
margin: auto;
width: auto;
border: 5px solid green;
margin-right: 50px; /* new */
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
<div class="main">
<div class="sideNav">Side Nav</div>
<div class="content">This is the content area</div>
<div class="sidePanel">Side Panel</div>
</div>
I am trying to make a fluid flex field where if there is no enough space then it should drop to next line. As you can see in this example if you decrease the size of the field it doesnt drop to next line because I am using flex.
.container {
width: 80%;
border: 2px solid #ddd;
padding: 20px;
display: flex;
overflow: hidden;
}
.container .panel {
flex: none;
}
.container .panel-info {
display: flex;
align-items: center;
}
.container .panel-info .dot {
background-color: #ccc;
width: 4px;
height: 4px;
border-radius: 50%;
margin: 0 8px;
}
<div class="container">
<div class="panel">Some Long Info</div>
<div class="panel-info">
<div class="dot"></div>
<div class="info">Information</div>
</div>
</div>
Use flex-wrap: wrap.
More information on MDN about the flex-wrap property
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 have a div that is vertically centered using flex box. But is there now any way to align it to the right?
One option would be to add justify-content: flex-end to the flexbox container: (example)
.parent {
display: flex;
width: 200px;
height: 200px;
border: 1px solid;
align-items: center;
justify-content: flex-end;
}
.parent > .child {
width: 50%;
height: 50%;
border: 2px solid #f00;
}
<div class="parent">
<div class="child"></div>
</div>
Alternatively, you could also add margin-left: auto to the flexbox item: (example)
.parent {
display: flex;
width: 200px;
height: 200px;
border: 1px solid;
align-items: center;
}
.parent > .child {
width: 50%;
height: 50%;
border: 2px solid #f00;
margin-left: auto;
}
<div class="parent">
<div class="child"></div>
</div>
I have a requirement that there are 4 boxes in one row.
the boxes have fixed width and height
but the width of the row will change by screen size.
the first box should be aligned to the left border of the row
last box aligned to right border.
Also the space between any two boxes should be equal.
Is there a pure CSS way to make that happen? Here is the jsfiddle code.
HTML:
<div class="row">
<div class ="col">
<div class="box"></div>
</div>
<div class ="col">
<div class="box"></div>
</div>
<div class ="col">
<div class="box"></div>
</div>
<div class ="col">
<div class="box"></div>
</div>
</div>
CSS:
.row {
display: table;
border: 1px solid green;
width: 400px; /* it changes by screen size actually */
padding: 5px;
}
.row:before, .row:after {
content: "";
}
.row:after {
clear: both;
}
.col {
float: left;
width: 25%;
}
.box {
border: 1px solid #DDD;
width: 80px;
height: 80px;
margin: 0 auto;
}
.col:first-child .box {
margin-left: 0;
}
.col:last-child .box {
margin-right: 0;
}
Use text-align:justify on the container, this way it will work no matter how many elements you have in your div (you don't have to work out % widths for each list item
Updated CSS
.row {
text-align: justify;
min-width: 412px;
border: 1px solid green;
width: 80%; /* it changes by screen size actually */
height: 90px;
padding: 5px;
}
.row:after {
content: '';
display: inline-block;
width: 100%;
}
.col {
display: inline-block;
}
.box {
border: 1px solid #DDD;
width: 80px;
height: 80px;
margin: 0 auto;
}
FIDDLE
You can make use of css3 flex boxes which is supported in modern browsers.
.row {
display: flex;
justify-content: space-between;
border: 1px solid green;
}
.box {
border: 1px solid #DDD;
width: 80px;
height: 80px;
}
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
jsfiddle demo
more about flex boxes # css tricks
Why not use flexbox ?
Demo
css
.flex-container {
padding: 5px;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-between; /* this make the end divs at sides and equal space between other divs */
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
html
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
Read here for more detail on flexbox
you simply have to remove the padding attribute from the following
.row {
display: table;
border: 1px solid green;
width: 400px; /* it changes by screen size actually */
/*padding: 5px;*/
}
here is the demo.
Let me know if this was helpful or if you have anymore queries.