This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 3 years ago.
I'm trying to have a list of items that wrap to the container size. I want the container to have a different background colour than the page background.
The code below isn't doing what I want.
An image is going to say so much more. This is what I'm after:
body {
background-color: grey;
margin: 0;
font-family: Arial;
}
.text { color: white; }
.wrapper {
display: flex;
justify-content: center;
}
.content {
padding: 10px;
background-color: green;
}
.listings {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
.item {
width: 100px;
padding: 15px;
height: 100px;
background-color: lightblue;
border: 1px solid black;
margin: 15px;
}
<body>
<div class="wrapper">
<div class="content">
<div class="text">Just some text that should wrap and resize. More text blah blah.</div>
<div class="listings">
<div class="item">Listing 1</div>
<div class="item">Listing 2</div>
<div class="item">Listing 3</div>
<div class="item">Listing 4</div>
<div class="item">Listing 5</div>
</div>
</div>
</div>
</body>
If it's a grid layout, why not just use grid instead?
body {
background-color: grey;
margin: 0;
font-family: Arial;
}
.text { color: white; }
.wrapper {
display: flex;
justify-content: center;
}
.content {
padding: 10px;
background-color: green;
}
.listings {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.item {
padding: 15px;
height: 100px;
background-color: lightblue;
border: 1px solid black;
margin: 15px;
}
<body>
<div class="wrapper">
<div class="content">
<div class="text">Just some text that should wrap and resize. More text blah blah.</div>
<div class="listings">
<div class="item">Listing 1</div>
<div class="item">Listing 2</div>
<div class="item">Listing 3</div>
<div class="item">Listing 4</div>
<div class="item">Listing 5</div>
</div>
</div>
</div>
</body>
Related
I have a six items in a container that is 600px wide and each item is 100px wide. I'm using box-sizing: border-box;. The last item wraps onto a next line. When I remove the border from the container the items no longer wrap. But from my understanding when using ``box-sizing: border-box;``` the items should not wrap. Any ideas what is causing the items to wrap?
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
html, body {
margin: 0;
padding: 0;
background-color: rgb(244, 244, 244);
}
.container {
background-color: antiquewhite;
height: 100vh;
}
.flex-container {
margin: auto;
display: flex;
border: 1px solid black;
background-color: aqua;
width: 600px;
flex-flow: row wrap;
}
.flex-item {
border: 1px solid black;
width: 100px;
}
<div class="container">
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
</div>
</div>
Your issue seems to be that the container is also shrinked (so the actual space for six 100px wide items is less than 600px) - precisely because it also has box-sizing: border-box applied to it.
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width.
From https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Set the container's box-sizing back to content-box and its items will fit.
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
html, body {
margin: 0;
padding: 0;
background-color: rgb(244, 244, 244);
}
.container {
background-color: antiquewhite;
height: 100vh;
}
.flex-container {
margin: auto;
display: flex;
border: 1px solid black;
background-color: aqua;
width: 600px;
flex-flow: row wrap;
box-sizing: content-box;
}
.flex-item {
border: 1px solid black;
width: 100px;
}
<div class="container">
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
</div>
</div>
This question already has answers here:
Why are flex items not wrapping?
(2 answers)
Closed 10 months ago.
I want to put multiple divs in same row and if they cant fit to break to next line.I want this enter image description here instead of this enter image description here
.cardContainer {
display: flex;
}
.card {
min-width: 185.17px;
height: 88px;
border-radius: 8px;
background: red;
margin-right: 8px;
display: block;
}
<div className="cardContainer">
<div className="card">A</div>
<div className="card">A</div>
<div className="card">A</div>
<div className="card">A</div>
<div className="card">A</div>
<div className="card">A</div>
<div className="card">A</div>
</div>
CSS Flexbox would be your friend:
.cardContainer {
display: flex;
gap: 10px;
}
.card {
background-color: red;
color: white;
width:20%;
border-radius: 8px;
padding: 10px;
height: 100px;
}
<div class="cardContainer">
<div class="card">A</div>
<div class="card">A</div>
<div class="card">A</div>
<div class="card">A</div>
<div class="card">A</div>
<div class="card">A</div>
<div class="card">A</div>
</div>
.container {
display: flex;
flex-wrap: no-wrap;
gap: 10px 10px;
}
.item {
width: 20%;
height: 50px;
background-color: red;
}
<div class='container'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
This question already has answers here:
Force flex item to span full row width
(2 answers)
Closed 2 years ago.
I have one div, which contains 3 divs, in flex-direction column.
Is there any way, I can make the bottom two red divs, sit next to each other (side by side). And not on top of each other? Like this:
I know I can store these two red divs in another row and set the direction to row.
But I wondered if this can be achieved, specifically with this html structure:
Thanks,
.main {
display: flex;
flex-direction: column;
width: 200px;
border: 1px solid black;
}
.top {
background-color: blue;
color: red;
width: 100%;
height: 50px;
}
.bottom {
background-color: red;
color: white;
width: 50%;
height: 50px;
}
<div class="main">
<div class="box top">Box 1</div>
<div class="box bottom">Box 2</div>
<div class="box bottom">Box 3</div>
</div>
<div class="main">
<div class="box top">Box 1</div>
<div class="box bottom">Box 2</div>
<div class="box bottom">Box 3</div>
</div>
Validate if this is what you want.
I removed the orientation and worked on the flex property values.
I also added the flex-wrap property to the container.
The flex-wrap property is a sub-property of the Flexible Box Layout module. It defines whether the flex items are forced in a single line or can be flowed into multiple lines
values definition:
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 0 1 100%;`
You can read the documentation here.
.main {
display: flex;
flex-wrap: wrap;
width: 200px;
border: 1px solid black;
}
.top {
flex: 0 1 100%;
background-color: blue;
color: red;
height: 50px;
}
.bottom {
flex: 1;
background-color: red;
color: white;
height: 50px;
}
<div class="main">
<div class="box top">Box 1</div>
<div class="box bottom">Box 2</div>
<div class="box bottom">Box 3</div>
</div>
You could wrap your bottom boxes in a new container with display: flex and flex-direction: row. Since you have your main wrapper as flex column, the children will align themselves as a column regardless of their width. You are basically giving in this instance a child to main which sets itself in the column layout that has in its turn children that set themselves in a row layout :)
.main {
display: flex;
flex-direction: column;
width: 200px;
border: 1px solid black;
}
.box-bottom-wrapper {
display: flex;
flex-direction: row;
}
.box-top {
background-color: blue;
color: red;
width: 100%;
height: 50px;
}
.box-bottom {
background-color: red;
color: white;
width: 50%;
height: 50px;
}
<div class="main">
<div class="box-top">Box 1</div>
<div class=box-bottom-wrapper>
<div class="box-bottom">Box 2</div>
<div class="box-bottom">Box 3</div>
</div>
</div>
As the title specifies: I have a number of divs in a column layout, and I would like them to expand to match the original height of the parent.
The parent doesn't have a fixed height, as it is part of a flex-based page layout.
Is this possible? In the attached example, I would like both .child divs to be equal in height, and the same height as the original height of the parent.
I can believe that it is impossible based on the way that CSS works.
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.parent {
flex: 1;
}
.child {
border: 1px solid black;
}
<div class="container">
<div class="header">Header</div>
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
<div class="footer">Footer</div>
</div>
You may imbricate flex boxes.
body {
margin: 0;
}
.container ,.parent{
display: flex;
flex-direction: column;
min-height: 100vh;
}
.parent, .child {
flex: 1;
min-height:auto;
}
.child {
border: 1px solid black;
}
<div class="container">
<div class="header">Header</div>
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
<div class="footer">Footer</div>
</div>
For the other part of the question : the same height as the original height of the parent. sibblings or parent of .container looks like missing to visualize how height is applied or comes from.
Could be something alike:
body {
margin: 0;
}
.container,
.parent {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.parent {
flex: 1;
min-height: auto;
overflow: auto;
}
.child {
flex: 1;
min-height: 100%;
border: 1px solid black;
}
* {
box-sizing: border-box;
}
<div class="container">
<div class="header">Header</div>
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
<div class="footer">Footer</div>
</div>
edit , from comment
For chrome, A bit of js can used to set a usable min-height value for that browser (and others).
let MyParent = document.querySelector('.parent');
let MyParentH = MyParent.offsetHeight;
MyParent.style.setProperty("--MyHeight", MyParentH +"px");
body {
margin: 0;
}
.container,
.parent {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.parent {
flex: 1;
min-height: auto;
overflow: auto;
}
.child {
flex: 1;
min-height: 100%;/* where var css is not supported */
min-height:var(--MyHeight, 100%);
border: 1px solid black;
}
* {
box-sizing: border-box;
}
<div class="container">
<div class="header">Header</div>
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
<div class="footer">Footer</div>
</div>
give 100% of the parents width to its children.
.parent {
display: 'flex';
flex-direction: column;
height: 100%;
}
.child {
border: 1px solid black;
height: 100%;
}
Do you want something like that?
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.parent {
flex: 1;
display: flex;
}
.child {
border: 1px solid black;
}
<div class="container">
<div class="header">Header</div>
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
<div class="footer">Footer</div>
</div>
PS: Update my answer with comment advice
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.parent {
flex: 1;
display: flex;
flex-direction: column;
}
.child {
border: 1px solid black;
flex-grow: 1;
}
<div class="container">
<div class="header">Header</div>
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
<div class="footer">Footer</div>
</div>
In the following codepen you will see that there is a flexbox inside of a css grid. As you can see, the contents of the flexbox div are overflowing under other parts of the grid.
If I remove the CSS grid-auto-rows:100px; then the flexbox contents no longer overflow. However, I really want the other css grid items to be 100px tall, unless their contents are too tall to be contained within 100px.
How can I have all the css grid items default to 100px tall while having any items whose contents are taller than 100px grow to hold all of the contents?
* {box-sizing: border-box;}
.wrapper {
display: grid;
grid-auto-rows: 100px;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.box2 {
display:flex;
flex-direction: column;
}
.box2 > div{
border: 2px solid #ffa999;
border-radius: 5px;
background-color: #ffd899;
padding: 1em;
color: #d94899;
}
<div class="wrapper">
<div class="box1">Box 1</div>
<div class="box2">
Box 2
<div class="flex1">Flex One</div>
<div class="flex2">Flex One</div>
<div class="flex3">Flex One</div>
<div class="flex4">Flex One</div>
</div>
<div class="box3">Box 3</div>
</div>
Use the minmax(min, max) function.
* {box-sizing: border-box;}
.wrapper {
display: grid;
grid-auto-rows: minmax(100px, auto);
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.box2 {
display:flex;
flex-direction: column;
}
.box2 > div{
border: 2px solid #ffa999;
border-radius: 5px;
background-color: #ffd899;
padding: 1em;
color: #d94899;
}
<div class="wrapper">
<div class="box1">Box 1</div>
<div class="box2">
Box 2
<div class="flex1">Flex One</div>
<div class="flex2">Flex One</div>
<div class="flex3">Flex One</div>
<div class="flex4">Flex One</div>
</div>
<div class="box3">Box 3</div>
</div>