This question already has answers here:
Make div (height) occupy parent remaining height
(9 answers)
Closed 6 years ago.
I have one div-container and children inside it.
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child" id="last-child"></div>
</div>
I don't know height of children (every time different content), but i have
#parent {
min-height: 500px;
}
I want to stretch last-child to the bottom of parent (it has to fill free space from his subling to parent bottom).
You can use flexbox for this (background colors added for visibility):
#parent {
min-height: 500px;
display: flex;
flex-direction: column;
background: #999;
}
.child {
background: #eee;
}
#last-child {
flex-grow: 1;
background: #faa;
}
<div id="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child" id="last-child">4</div>
</div>
Make the parent a flex box with display:flex; and the flex--direction being column. Next give the last child element the flex:1; property to make it expand to the remainder of the space in the parent.
#parent {
min-height: 500px;
display:flex;
flex-direction: column;
}
#last-child{
flex:1;
background:blue;
}
.child{
background:red;
}
<div id="parent">
<div class="child">jljlkj</div>
<div class="child">kjljlkjl</div>
<div class="child">kljlkjlhi</div>
<div class="child" id="last-child"></div>
</div>
Related
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 1 year ago.
I have a parent div element containing several children. The parent div is contained inside an outer container div. I want the parent div to be centered inside the container but the problem is that the parent uses flex-wrap: wrap to wrap all of its child divs.
The parent div is centered in the container as expected:
#container {
width: 500px;
display: flex;
justify-content: center;
background-color: #c0faff;
}
#parent {
display: flex;
flex-wrap: wrap;
}
.child {
background-color: #5bb4bb;
width: 100px;
height: 100px;
margin: 5px;
}
<div id="container">
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
But, as soon as there is 1 child that must be wrapped onto the 2nd row, the parent div floats to the left and ignores the container's justify-content: center; css property:
#container {
width: 500px;
display: flex;
justify-content: center;
background-color: #c0faff;
}
#parent {
display: flex;
flex-wrap: wrap;
}
.child {
background-color: #5bb4bb;
width: 100px;
height: 100px;
margin: 5px;
}
<div id="container">
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
How can I make the previous code snippet's result look like this?:
You can only achieve this if you set a fixed width to the container that holds the flexbox-items. You can make it a bit simpler and use calc(...) function in CSS here. If you know how many items should be in one row, you can just change the number for multiple breakpoints easily. Even easier if you set the width of one item as a css custom property.
#container {
width: 500px;
display: flex;
justify-content: center;
background-color: #c0faff;
}
#parent {
display: flex;
flex-wrap: wrap;
width: calc(4* 110px)
}
.child {
background-color: #5bb4bb;
width: 100px;
height: 100px;
margin: 5px;
}
<div id="container">
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
This question already has answers here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
I have a container div that has child divs with fixed widths and wraps. What I realised is that the container's width doesn't fit tightly to the content after it wraps, usually leaving a 'ghost' space on the right. Is there a way to force it to readjust the width according to its content?
.container {
max-width: 12em;
background-color: black;
}
.child {
display: inline-block;
width: 5em;
background-color: red;
}
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
So in this case when the child wraps after 2 of them add up to 10em, the container instead of being 10em, it is still 12em. And if the window size forces it down to a single div wrapping, the container rather than being 5em, could be 6em, 7em, 8em, etc depending on window width.
Is there a way to get rid of the 'ghost' space and make the container fit exactly to how the child is wrapping and it's total width?
Note: I am not talking about the extra space in between each child element. I'm referring to the giant gap left in the container, which causes the container to not accurately reflect the size of its child content. I understand that I can simply count how many child can fit in 12em and change the container width to be 10em to fit 2 childs perfectly. But I want that to be flexible. Is that possible?
The extra space after each child element is a result of the display: inline-block property and is due to the literal whitespace between each div in your HTML. You may verify this by removing the linebreaks between child divs so that their open and close tags are back-to-back:
<div class="container">
<div class="child">1</div><div class="child">2</div><div class="child">3</div>/*...*/
</div>
Although this will eliminate the pesky whitespace, it comes at the expense of code clarity/readability and is surely an irritating way to write HTML.
In my experience, often the best solution to this issue is to set the parent container to display: flex:
.container {
display: flex;
flex-wrap: wrap;
max-width: 10em;
background-color: black;
}
.child {
display: inline-block;
width: 5em;
background-color: red;
}
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div><div class="child">5</div>
<div class="child">6</div>
</div>
In this case you will also need to provide the flex-wrap: wrap property to inform the flex container to wrap its contents. Presumably you can now update the container's max-width property to 10em to fit exactly the width of two child elements so I've taken the liberty of this change in the code snippet.
Looks like you want to render a table. So you may want to use:
<table>
<tr>
<td>Col1</td>
<td>Col2</td>
</tr>
...
</table>
In case im wrong:
You can do this with flex or grid
Helpful link Flexbox, Grid
.container {
max-width: 12em;
background-color: black;
display: flex;
}
.child {
display: block;
min-width: 5em;
background-color: red;
border: 1px dashed blue;
}
/* FLEX */
.container-flex {
/* new row if next element doesnt fit */
flex-wrap: wrap;
}
.container-flex .child {
/* makes children grow evenly after wrapping */
flex-grow: 1;
}
/* GRID */
.container-grid {
display: grid;
/* 2 auto-horizontally sized colums */
grid-template-columns: auto auto;
}
.container-grid .child {
/* noting to do here */
}
<div style='float: left; margin-right: 10px;'>
Flex<br>
<small>extend elements to 6em</small><br>
<hr>
<div class="container container-flex">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
</div>
<div style='float: left; margin-right: 10px;'>
Grid<br/>
<small>collapse container to 10em</small><br>
<hr>
<div class="container container-grid">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
</div>
You can do it like this
.container { max-width: 4.5em;background-color: black; }
.child { display: inline-block; width:cover; background-color: red; }
<!DOCTYPE html>
<html>
<head>
<title>Answer</title>
</head>
<body>
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
With the width set to 'cover' it covers the complete area leaving no space.In order to fix the black background (of container which is more or less acting like border), you can manually adjust it's size.
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 5 years ago.
What I basically want is to make each child element's height to wrap its content.
Here is my code:
<style>
.parent{
display: flex;
}
.child{
padding: 5px;
margin: 10px;
background: green;
height: auto;
}
</style>
<div class="parent">
<div class="child">child1</div>
<div class="child">child2</div>
<div class="child">child3</div>
<div class="child" style="height:50px">child1</div>
</div>
Output:
Expected output:
You just need to set align-items: flex-start on parent element because default value is stretch.
.parent {
display: flex;
align-items: flex-start;
}
.child {
padding: 5px;
margin: 10px;
background: green;
height: auto;
}
<div class="parent">
<div class="child">child1</div>
<div class="child">child2</div>
<div class="child">child3</div>
<div class="child" style="height:50px">child1</div>
</div>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 6 years ago.
I have a requirement as shown below:
|[] [][]|
One element at left side of the viewport and two elements on right side of the viewport. To learn display: flex, I am trying this layout without wrapping the elements.
Is this layout possible with flexbox?
Here is the HTML:
<div class="parent">
<div class="child child--left"></div>
<div class="child child--right"></div>
<div class="child child--right"></div>
</div>
I tried using align-items and align-self but no use. Please help.
CSS:
.parent{
display: flex; // flexbox
}
You can use margin-left:auto in the div you need in the right side:
.parent {
display: flex;
height: 100px;
width: 100%;
}
.child {
flex: 0 0 20px;
border: solid 1px green;
}
.child--right {
margin-left: auto;
}
<div class="parent">
<div class="child"></div>
<div class="child child--right"></div>
<div class="child"></div>
</div>
you need to use a spacer defined as flex:auto; in order to align the flex-boxes as intended: DEMO
CSS
.parent{
display:flex;
}
.spacer{
flex:auto;
}
and your HTML would be:
<div class="parent">
<div class="child child--left"></div>
<div class="spacer"></div>
<div class="child child--right"></div>
<div class="child child--right"></div>
</div>
You can use flex to fill a space
body {
margin: 0;
}
.flex {
display: flex;
background: purple;
width: 100%;
height: 75px;
}
.item {
background: orange;
width: 50px;
height: 50px;
margin: 12.5px;
}
.filler {
flex-grow: 1;
}
<div class="flex">
<div class="item"></div>
<div class="filler"></div>
<div class="item"></div>
<div class="item"></div>
</div>
You'll notice I've added a div with the class filler and set it to have flex-grow: 1; This means that div will always take up the remaining space.
Applying: margin-<direction>: auto on the child of a flex item will essentially float the item in the opposite direction (with none of the complications of float).
.child--right {
margin-left: auto;
}
A way to do this without using an extra filler element is to use auto-margins.
CSS
.child--left {
margin-right: auto; /* <== here's the auto margin */
}
It will add a margin to the right of .child--left which will fill up the available space within .parent (essentially acting like there's a filler element between the left and right children, but actually without the filler element)
HTML
<div class="parent">
<div class="child child--left"><div class="box"></div></div>
<div class="child child--right"><div class="box"></div></div>
<div class="child child--right"><div class="box"></div></div>
</div>
css
.parent{
display: flex;
justify-content: center;
}
.box{
width: 200px;
height: 200px;
background: #333;
margin: 20px
}
Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Fiddle: https://jsfiddle.net/rittamdebnath/315wps5g/
I have a main <div> container, consisting of 3 child <div>'s:
<div id="parent">
<div id="child-left">.. some markup ..</div>
<div id="child-flex>
<div id="flex-child-1">
<div id="flex-child-2">
<div id="flex-child-3">
<div id="flex-child-4">
</div>
<div id="child-right">.. some markup ..</div>
</div>
child-left is display:inline and float:left, with a fixed
set width
child-right is display:inline and float:right,
with a fixed set width
child-flex is display:inline-flex
I would like to achieve the following:
Get the child-flex container to display inline in between child-left and child-right, and take up any remaining space.
Get all the flex-child- children to have equal width within the child-flex container. At the moment I have set flex: 1 0 auto;, but it does not seem to work. Could be because of the parent?
Just use flexbox throughout...in this case, use display:flex on the parent and then make the #child-flex flex-container a nested flexbox.
No need to use floats at all.
Codepen Demo
#parent {
display: flex;
height: 100px;
}
#child-right,
#child-left {
flex: 0 0 100px;
background: pink;
}
#child-flex {
flex: 1;
background: lightblue;
display: flex;
}
.flex-child {
flex: 1;
border: 1px solid grey;
}
<div id="parent">
<div id="child-left">some markup</div>
<div id="child-flex">
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
<div class="flex-child"></div>
</div>
<div id="child-right">some markup</div>
</div>