I have to design something like below:
A parent container with 'n' childs that may very well go beyond the
window's width and in that case page should scroll and not wrap to
next line.
The above container will be rendered multiple times below one
another.
The page should scroll as a whole, i.e. scroll should be at a wrapper
(div with class .overflow) level and not at individual parent
level.
Scroll horizontally in the snippet below to see the behavior.
.overflow {
overflow-x: auto;
}
.parent {
background: #ccc;
border: 4px solid blue;
display: flex;
margin: 10px 0;
}
.child {
display: inline-flex;
height: 50px;
background: white;
margin: 10px;
flex: 1 0 300px;
border: 2px solid red;
}
<div class="overflow">
<div class="parent">
<div class="child">
1
</div>
<div class="child">
2
</div>
<div class="child">
3
</div>
</div>
<div class="parent">
<div class="child">
1
</div>
<div class="child">
2
</div>
<div class="child">
3
</div>
</div>
</div>
The issue now is that the grey background on parent is not overflowing behind the children beyond the window's width.
How to achieve this (make .parent div background overflow for all its children) and possibly with retaining the flex-box?
Use inline-flex for parent and replace flex-basis by width
.overflow {
overflow-x: auto;
}
.parent {
background: #ccc;
border: 4px solid blue;
display: inline-flex;
min-width:100%; /*To keep the block behavior*/
box-sizing:border-box;
margin: 10px 0;
}
.child {
display: inline-flex;
height: 50px;
background: white;
margin: 10px;
width:300px;
flex-shrink:0;
flex-grow:1;
border: 2px solid red;
}
<div class="overflow">
<div class="parent">
<div class="child">
1
</div>
<div class="child">
2
</div>
<div class="child">
3
</div>
</div>
<div class="parent">
<div class="child">
1
</div>
<div class="child">
2
</div>
<div class="child">
3
</div>
</div>
</div>
Remove overflow div
Change your parent class css to
.parent {
overflow-x: auto;
background: #ccc;
border: 4px solid blue;
display: flex;
margin: 10px 0;
}
Related
In the example below, when I set a width for a wrapper, the parent flex container can no longer use the flex-wrap property. The top two boxes won't wrap, but the bottom ones will.
<div class="wrapper">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
.wrapper {
width: 700px;
margin: 0 auto;
border: solid cadetblue 5px;
}
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.child {
height: 250px;
min-width: 250px;
max-width: 300px;
flex: 1;
background: mistyrose;
border: solid goldenrod 2px;
margin: 30px;
}
The 'issue' you raise is by design; you're specifying a width for the parent that is wide enough for your children to be wholly contained within (a 700px container for two 300px children). flex-wrap only causes elements to overflow when there's not enough space for the container to hold them. In your example, there is.
To force an overflow responsively, you could either specify a narrow width on the parent(which will cause an overflow for all viewports):
.wrapper {
width: 400px;
margin: 0 auto;
border: solid cadetblue 5px;
}
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.child {
height: 250px;
min-width: 250px;
max-width: 300px;
flex: 1;
background: mistyrose;
border: solid goldenrod 2px;
margin: 30px;
}
<div class="wrapper">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
Or use max-width instead(which will only overflow on narrow viewports):
.wrapper {
max-width: 700px;
margin: 0 auto;
border: solid cadetblue 5px;
}
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.child {
height: 250px;
min-width: 250px;
max-width: 300px;
flex: 1;
background: mistyrose;
border: solid goldenrod 2px;
margin: 30px;
}
<div class="wrapper">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
This question already has answers here:
Make background color extend into overflow area
(4 answers)
Closed 4 years ago.
I'm trying to create a table like structure that is scrollable horizontally. To do that I have a wrapper div that has overflow-x: auto, a div for each row and a div for each cell.
I want to apply a style to the row but the style is only applied to those elements that are visible.
.inner {
flex: 1 0 10em;
height: 2em;
background-color: green;
}
.outer {
border-bottom: 10px solid red;
display: flex;
}
.box {
width: 20em;
overflow-x: scroll;
}
<div class="box">
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</div>
I want all of the green boxes to have a red bottom border, but the border only appears on those items that are not overflowing. What am I missing?
You may try this instead:
.inner {
flex: 1 0 10em;
width:10em; /*Specify a width */
height: 2em;
background-color: green;
}
.outer {
border-bottom: 10px solid red;
display: inline-flex; /* to take the width of content and not container*/
}
.box {
width: 20em;
overflow-x: scroll;
}
<div class="box">
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</div>
I dont know exactly what you mean, but I hope this helps:
Since the CSS you use only for the outer,It does just that and put it only for the part that is visible. To achieve bottom red border for all of them, you have to put the border on the inner part.
HTML:
<div class="box">
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</div>
CSS:
.inner {
flex: 1 0 10em;
height: 2em;
background-color: green;
border-bottom: 10px solid red;
}
.outer {
width: 20em;
display: flex;
}
.box {
width: 20em;
overflow-x: scroll;
}
Hope it helps :)
I have a content div with a variable length of content, horizontally.
I would like the width of this content div to auto-size depending on the length of it's content. For example, I would like to be able to remove the arbitrary "20%" value, and have the div size accordingly. Currently removing the 20% value from the width is forcing it to resize to 100% of it's container. What CSS am I missing?
Fiddle
.wrapper {
border: 2px solid green;
}
.content {
margin: 0 auto;
text-align: center;
border: 2px solid orange;
width: 20%;
}
<div class="wrapper">
<div class="content">
<span>One</span>
<span>Two</span>
<span>Three</span>
<span>Four</span>
</div>
</div>
Put text-align:center on the wrapper and set the display of the content div to inline or inline-block:
.wrapper {
border: 2px solid green;
text-align:center;
}
.content {
margin: 0 auto;
text-align: center;
border: 2px solid orange;
display: inline;
}
<div class="wrapper">
<div class="content">
<span>One</span>
<span>Two</span>
<span>Three</span>
<span>Four</span>
</div>
</div>
If you want fluid resizing behavior I'd suggest flexbox:
.wrapper {
border: 2px solid green;
display: flex;
justify-content: center;
}
.content {
margin: 0 auto;
text-align: center;
border: 2px solid orange;
/*width: 20%;*/
}
<div class="wrapper">
<div class="content">
<span>One</span>
<span>Two</span>
<span>Three</span>
<span>Four</span>
</div>
</div>
inline:
flexbox:
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 6 years ago.
I'm trying to center div's inside one outter div, but I can't.
My html is something like this :
<div class="outterDiv">
<div class="innerDivBig">
<div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
Inner Div
</div>
<div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
Inner Div
</div>
<div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
Inner Div
</div>
<div style="clear:both"/>
</div>
</div>
And my css is something like this :
.outterDiv{
width: 600px;
border: 1px solid #f00;
text-align: center;
}
.innerDivBig{
margin: 0 auto;
display:table;
}
Here is jsfiddle.
.outterDiv{
width: 600px;
border: 1px solid #f00;
text-align:center;
}
.innerDivBig{
display: inline-block;
}
https://jsfiddle.net/2a8514nf/7/
UPDATE:
https://jsfiddle.net/2a8514nf/4/
I use display: table because the browser calculates the width to fit all the child elements width display: table-cell so that you wont have to worry about the width.
I also use padding instead of margin since it does not expand the element so the parent size remains the same.
.outer {
width: 500px;
border: 1px solid #000;
padding: 15px;
margin: 0 auto;
}
.inner {
display: table;
table-layout: fixed;
width: 100%;
}
.inner > div {
display: table-cell;
padding: 0 5px;
text-align: center;
}
.inner > div > div {
padding: 15px;
text-align: center;
border: 1px solid #00F;
}
<div class="outer">
<div class="inner">
<div>
<div>Inner Div 1</div>
</div>
<div>
<div>Inner Div 2</div>
</div>
<div>
<div>Inner Div 3</div>
</div>
</div>
</div>
There are similar questions, and answers using flexbox (css3), or table (work for the last element only).
But how can I make the element in the middle fill remaining height, using css2 (for IE8)?
.parent {
background: yellow;
display: block;
height: 200px;
}
.child {
border: solid 1px #555;
}
.fill {
height: 100%;
}
<div class="parent">
<div class="child">
1
</div>
<div class="child fill">
2 (fill available height)
</div>
<div class="child">
3
</div>
</div>
Fiddle
if you need IE8 support then use display:table/table-row
.parent {
background: yellow;
display: table;
width: 100%;
height: 200px;
}
.child {
display: table-row;
}
.height{
height: 20px /*change the value for what you like */
}
/*demo only */
.cell {
display: table-cell;
vertical-align: top;
border: 1px solid #555
}
<div class="parent">
<div class="child height">
<div class="cell">
1
</div>
</div>
<div class="child">
<div class="cell">
2 (fill available height)
</div>
</div>
<div class="child height">
<div class="cell">
3
</div>
</div>
</div>