This question already has answers here:
Make child divs expand to fill parent div's width
(4 answers)
Closed 12 months ago.
https://jsfiddle.net/98oqr3jb/
I'm trying to make the green elements always fit the container. I don't want min-width: 25%; to be static, I want it to be dynamic. So if I decide I want to add another green div, it will fit the container correctly.
html,body {
background-color: rgba(40,40,40)
}
.container {
width: 100%;
height: 200px;
background-color: rgba(0,0,40);
}
.green {
/* Make min width dynamic. I.E if I have 5 items it'd be 20%, if I had 6, 16.6666667. */
min-width: 25%;
background-color: rgba(0,40,0);
height: 180px;
display: inline-block;
}
<div class="container">
<div class="green">test</div><div class="green">test</div><div class="green">test</div><div class="green">test</div>
</div>
Assign display: flex; to parent(container) and assign flex:1; to child(green)
html,body {
background-color: rgba(40,40,40)
}
.container {
width: 100%;
height: 200px;
background-color: rgba(0,0,40);
display:flex;
}
.green {
/* Make min width dynamic. I.E if I have 5 items it'd be 20%, if I had 6, 16.6666667. */
background-color: green;
height: 180px;
flex: 1;
}
<div class="container">
<div class="green">test</div><div class="green">test</div><div class="green">test</div><div class="green">test</div>
</div>
Related
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
How can I make my flexbox layout take 100% vertical space?
(4 answers)
Closed 9 months ago.
I have a div of height 100%. Inside that div, there are two children: an <a> and another <div>. The child <div> also has a height of 100%. I expected setting the child div's height to 100% would make it fill up the remaining height, not copy the height of the parent element and disregard fellow children leading to unintended overflow.
Example: https://codepen.io/gamepro5/pen/Jjpaqva (why is the child class in this example overflowing it's parent with a height of 100%?)
html {
height: 100%;
}
a {
display: block;
text-align: center;
}
body {
margin:0;
width:100%;
height: 100%;
}
.parent {
width: 75%;
background-color: red;
height: 100%;
}
.child{
height: 100%;
width: 75%;
background-color: green;
/*would need to do a calc of 100% minus whatever the height of the <a> tag is, but that is annoying to do since the height of the other items can change. */
}
.child p {
text-align: center;
}
<html>
<body>
<div class="parent">
<a>Daddy Potato (king of all potatoes):</a>
<div class="child"><p>Potatoe</p><p>Potatoe</p><p>Potato</p><p>Potate</p><p>Ube</p></div>
</div>
</body>
</html>
I simply want the child div to fill up the remaining available space with it's height without overflowing.
You can achieve this with flex: Set display: flex and flex-flow: column; on the parent element, and on the child set flex-grow: 1;
html {
height: 100%;
}
a {
display: block;
text-align: center;
}
body {
margin:0;
width:100%;
height: 100%;
}
.parent {
width: 75%;
background-color: red;
display: flex;
flex-flow: column;
height: 100%;
}
.child{
flex-grow: 1;
width: 75%;
background-color: green;
}
.child p {
text-align: center;
}
<html>
<body>
<div class="parent">
<a>Daddy Potato (king of all potatoes):</a>
<div class="child"><p>Potatoe</p><p>Potatoe</p><p>Potato</p><p>Potate</p><p>Ube</p></div>
</div>
</body>
</html>
This question already has answers here:
3 inline-block divs with exactly 33% width not fitting in parent
(7 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
How can I show three columns per row?
(4 answers)
Closed last year.
Please help me understand this. Here is my HTML (body)
<body>
<main class="container">
<div class="row">
<div class="col">Sparky</div>
<div class="col">Vegeta</div>
<div class="col">Flufferpants</div>
</div>
</main>
</body>
Here is my CSS
* {
font-size: 25px;
/* box-sizing: border-box; */
}
body {
background-color: gray;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: lightgoldenrodyellow;
}
.row {
background-color: rgb(119, 103, 134);
width: 100%;
}
.col {
display: inline-block;
width: 33%;
height: 200px;
}
I am trying to have the 3 cols be on a single row, evenly spaced apart. I know this is easily done through flexbox, but I wanted to try using the width property manually.
Even when I set each of the col to be width 33%, it still rolls onto the next line. What's going on here?
https://jsfiddle.net/zd29ewb6/
Thanks
use display flex on the row
* {
font-size: 25px;
/* box-sizing: border-box; */
}
body {
background-color: gray;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: lightgoldenrodyellow;
}
.row {
background-color: rgb(119, 103, 134);
width: 100%;
display: flex;
}
.col {
width: 33%;
height: 200px;
}
using inline-block elements there always be a whitespace between the elements and you set your width 33% and adding the width of all the 3 divs its width
gets more then the parents width so it shift the third element to next line. so you can reduce the width of col like this.
.col {
display: inline-block;
width: 30%;
height: 200px;
}
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Make a div span two rows in a grid
(2 answers)
Closed 5 years ago.
I have this structure ... it's similar to the WordPress administration area ... the point is that I need .main taking all the space available in width and height and .foot remains down while there is no content that lowers it. I want to use flex because I will have columns inside the .main and I need these columns take full height as well... Maybe someone can give me another solution, but I can NOT change the html, only the CSS
.wrap {
display: flex;
}
.sidebar {
position: fixed;
top: 0;
bottom: -100px;
background-color: #00a0d2;
width: 200px;
}
.main {
background-color: #66BB6A;
display: flex;
}
.foot {
margin-left: -200px;
background-color: #9999dd;
height: 60px;
}
<div class="wrap">
<div class="sidebar">Menu</div>
<div class="main">Content</div>
<div class="foot">Footer</div>
</div>
where the final result would be something like this, thx
A fixed position sidebar will not be affected by flexbox, so you need to adjust your margins to make room for it.
html,
body {
height: 100%;
}
body {
min-height: 100%;
}
.wrap {
display: flex;
flex-direction: column; /* required to establish column layout */
min-height: 100%;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0; /* full height - change if required */
background-color: #00a0d2;
width: 200px;
opacity: .5/* for demo purposes */
;
}
.main {
background-color: #66BB6A;
display: flex;
flex: 1; /* take remaining height*/
margin-left: 200px; /* width of sidebar */
}
.foot {
margin-left: 200px; /* width of sidebar */
background-color: #9999dd;
height: 60px;
}
<div class="wrap">
<div class="sidebar">Menu</div>
<div class="main">Content</div>
<div class="foot">Footer</div>
</div>
You could use css grid. It allows room for 2d grid with minimal code.
.wrap {
display: grid;
/*Make 2 columns with the first having a min width of 200px*/
grid-template-columns: minmax(200px, 1fr) 10fr;
}
.sidebar {
background-color: #00a0d2;
/*Make sidebar take up the space of the 2 rows*/
grid-row: 1/3;
}
.main {
background-color: #66BB6A;
/*Let the main content take up the space of view height*/
height: 100vh;
}
.foot {
/*set footer to span the last row leaving the space for the sidebar*/
grid-column: 2/3;
background-color: #9999dd;
height: 60px;
}
<div class="wrap">
<div class="sidebar">Menu</div>
<div class="main">Content</div>
<div class="foot">Footer</div>
</div>
In the below I have 2 div containers.
Container 1 which contains a google map div that looks like the below :
HTML
<div class="container">
<div class="mapCanvas2" #mapCanvas2></div>
</div>
CSS
.container{
height: 64%;
width: 100%;
}
.mapCanvas2{
position:relative;
height: 100%;
width: 100%;
}
Container 2
.container2{
height: 36%;
width: 100%;
}
The problem:
On some screens (depending on its height) a blank space shows up below container 2 to hide it I must set the height value of .container to 67% or above which is of course not a solution.
You can use flex, by specifing flex:1 you make the second container fill the remaining space :
body {
height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
}
.container {
height: 30%;
background: red;
}
.container-2 {
flex: 1;
background: blue;
}
<div class="container">
<div class="mapCanvas2" #mapCanvas2> map </div>
</div>
<div class="container-2"></div>
This question already has answers here:
Chrome / Safari not filling 100% height of flex parent
(5 answers)
Closed 6 years ago.
I've got a delicate problem for any CSS guru out there.
My green div has a flexible height, taking up the remaining.
And now I want to put a div inside that div which should be the half of the green div. But it seems like if Chrome treats it like half of the whole page rather than the flex item.
http://jsfiddle.net/unh5rw9t/1/
HTML
<body>
<div id="wrapper">
<div id="menu">
1
</div>
<div id="content">2
<div id="half_of_content">2.1</div>
</div>
<div id="footer" style="">
3
</div>
</div>
</body>
CSS
html,body {
height: 100%;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
#menu {
height: 70px;
background-color: purple
}
#content {
flex: 1;
height: 100%;
background-color: green;
}
#half_of_content {
height: 50%;
background-color: yellow;
}
#footer {
height: 100px;
background-color: cyan
}
#Michael_B explained why Chrome behaves like this:
You gave the body a height: 100%. Then gave its child (.wrapper)
a height: 100%. Then gave its child (.content) a height: 100%.
So they're all equal height. Giving the next child (#half_of_content) a height: 50% would naturally be a 50% height
of body.
However, Firefox disagrees because, in fact, that height: 100% of .content is ignored and its height is calculated according to flex: 1.
That is, Chrome resolves the percentage with respect to the value of parent's height property. Firefox does it with respect to the resolved flexible height of the parent.
The right behavior is the Firefox's one. According to Definite and Indefinite Sizes,
If a percentage is going to be resolved against a flex item’s
main size, and the flex item has a definite flex
basis, and the flex container has a definite main
size, the flex item’s main size must be treated as
definite for the purpose of resolving the percentage, and the
percentage must resolve against the flexed main size of the
flex item (that is, after the layout algorithm below has been
completed for the flex item’s flex container, and the flex
item has acquired its final size).
Here is a workaround for Chrome:
#content {
display: flex;
flex-direction: column;
}
#content::after {
content: '';
flex: 1;
}
#half_of_content {
flex: 1;
height: auto;
}
This way the available space in #content will be distributed equally among #half_of_content and the ::after pseudo-element.
Assuming #content doesn't have other content, #half_of_content will be 50%. In your example you have a 2 in there, so it will be a bit less that 50%.
html,
body {
height: 100%;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
#menu {
height: 70px;
background-color: purple
}
#content {
flex: 1;
height: 100%;
background-color: green;
display: flex;
flex-direction: column;
}
#content::after {
content: '';
flex: 1;
}
#half_of_content {
flex: 1;
background-color: yellow;
}
#footer {
height: 100px;
background-color: cyan
}
<div id="wrapper">
<div id="menu">
1
</div>
<div id="content">2
<div id="half_of_content">2.1</div>
</div>
<div id="footer" style="">
3
</div>
</div>
You could absolutely position div id="half_of_content".
#content {
flex: 1;
height: 100%;
background-color: green;
position: relative; /* new */
}
#half_of_content {
height: 50%;
background-color: yellow;
position: absolute; /* new */
width: 100%; /* new */
}
DEMO
With regard to your statement:
But it seems like if Chrome treats it like half of the whole page
rather than the flex item.
You gave the body a height: 100%. Then gave its child (.wrapper) a height: 100%. Then gave its child (.content) a height: 100%. So they're all equal height. Giving the next child (#half_of_content) a height: 50% would naturally be 50% height of body.
With absolute positioning, however, you don't need to specify parent heights.
Nesting flexboxes is a little buggy. I reworked your markup a little by adding an inner wrapper with display: flex; which seems to do the job. Here is the fiddle (also using class names instead of ids).
<div class="content">
<div class="wrapper-inner">
2
<div class="half">
2.1
</div>
</div>
</div>
.wrapper-inner {
position: absolute;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
Fix:
on #content set
display: flex;
flex-flow: column nowrap;
justify-content: flex-end
on #half_of_content set flex: 0 0 50%;
Caveat: you need to add an extra div as a child of #content.
Here's the full example:
html,body {
height: 100%;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
#menu {
height: 70px;
background-color: purple
}
#content {
flex: 1;
height: 100%;
display:flex;
flex-flow: column nowrap;
justify-content: flex-end;
background-color: green;
}
#half_of_content {
flex: 0 0 50%;
background-color: yellow;
}
#footer {
height: 100px;
background-color: cyan
}
<body>
<div id="wrapper">
<div id="menu">
1
</div>
<div id="content">2
<div id="half_of_content">2.1</div>
</div>
<div id="footer" style="">
3
</div>
</div>
</body>