This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 2 years ago.
I have a container div with many child div having fixed width. I am using flexbox to align the child divs in a single row. Below html and css works except that the first and last child are still overflowing the container div. I want the child divs to be wrapped in single row using a horizontal scroll -
.container {
display: flex;
justify-content: center;
width: 500px;
height: 200px;
background-color: gray;
overflow-x: auto;
}
.child {
margin: 5px;
min-width: 100px;
height: 150px;
background-color: darkgray;
}
<div class="container">
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
</div>
Please see this codepen I've created.
You should wrap all children into other tag to display full content without overflow
.container {
display: flex;
width: 500px;
height: 200px;
overflow: auto;
}
.flex-box {
display: flex;
justify-content: center;
background-color: gray;
flex: 1;
}
.child {
margin: 5px;
min-width: 100px;
height: 150px;
background-color: darkgray;
}
<div class="container">
<div class="flex-box">
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
</div>
</div>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 1 year ago.
There is an issue with the first three divs which contains other elements in it.
If I remove them, then it is working fine but not otherwise.
See Output Here
.results{
text-align: center;
}
.result-box{
width: 200px;
height: 250px;
background-color: red;
margin: 10px;
padding: 5px;
display: inline-block;
}
<div class="wrapper">
<div class="results">
<div class="result-box"><p>Hello</p><p>World</p></div>
<div class="result-box"><p>Nothing</p></div>
<div class="result-box"><p>Everything</p></div>
<div class="result-box"></div>
<div class="result-box"></div>
<div class="result-box"></div>
</div>
</div>
best solution for collect divs inside a container is using
flex (display:flex) or gird (display:gird) witch grid is not working correctly in old browser ( internet explorer)
but if you don't like to use these methods
here is a tricky way
.results{
text-align: center;
position:relative;
}
.result-box{
width: 200px;
height: 250px;
background-color: red;
margin: 10px;
padding: 5px;
display: inline-block;
float:left;
}
<div class="wrapper">
<div class="results">
<div class="result-box"><p>Hello</p><p>World</p></div>
<div class="result-box"><p>Nothing</p></div>
<div class="result-box"><p>Everything</p></div>
<div class="result-box"></div>
<div class="result-box"></div>
<div class="result-box"></div>
</div>
</div>
Check the below snippet
.results{
text-align: center;
display: flex;
justify-content: center;
}
.result-box{
width: 50px;
height: 150px;
background-color: red;
margin: 10px;
padding: 5px;
display: inline-block;
}
<div class="wrapper">
<div class="results">
<div class="result-box"><p>Hello</p><p>World</p></div>
<div class="result-box"><p>Nothing</p></div>
<div class="result-box"><p>Everything</p></div>
<div class="result-box"></div>
<div class="result-box"></div>
<div class="result-box"></div>
</div>
</div>
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 2 years ago.
I am having issue while using overflow-x: scroll and justify-content: center on flex parent container.
Please see my code below.
issue: first flex child item is not showing it is crop in left or other all child item. please see my screenshot and code below.
I need your help. thank you in advance.
.container {
width: 500px;
margin: 0 auto;
display: flex;
justify-content: center;
flex-direction: row;
overflow-x: scroll;
}
.box {
height: 100px;
border: 1px solid red;
min-width: 100px;
margin-right: 10px;
flex-grow: 1;
}
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
The justify-content:center is making the content to align to center and some of the left is cut off. You could remove it and try.
.container {
width: 500px;
margin: 0 auto;
display: flex;
flex-direction: row;
overflow-x:scroll
}
.box {
height: 100px;
border: 1px solid red;
min-width: 100px;
margin-right: 10px;
flex-grow: 1;
}
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
remove "justify-content:center". And you said that you need center aligned elements when there are only 1 or 2 elements...so the answer is they will by aligned automatically...if there will be only two elements each of them will have 250px width and if there will be only one then width of this element will be 500px.
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 3 years ago.
I have content that I am resizing, and I want to have a fixed heading that doesn't grow/shrink and is not part of the scrollable content. With the content below becoming scrollable if there is not enough space.
The content outer wrapper (flexGrowWrapper) has a flex-grow: 1 and the inner wrapper has height: 100%; overflow-y: auto. The thought process here is that flexGrowWrapper will fill up any remaining space within the resize div, the inner wrapper will then take the full height of the flexGrowWrapper and if there is overflow, it should scroll.
What is happening is that flexGrowWrapper does grow to fill the resize area, but it seems that it's content is dictating it's min-height.
How can I make flexGrowWrapper never go beyond the resize area height?
$("button").click(function() {
$(".resize").toggleClass("small");
});
.resize {
height: 200px;
display: flex;
flex-direction: column;
overflow-y: hidden;
width: 300px;
}
.resize.small {
height: 100px;
}
.heading {
flex: 0 0 auto;
}
.flexGrowWrapper {
border: 2px solid red;
flex-grow: 1;
}
.wrapper {
height: 100%;
overflow-y: auto;
}
.content {
display: flex;
flex-direction: row;
clear: both;
}
<button>
Resize
</button>
<div class="resize">
<div class="heading">
<label>Some heading that wont scroll</label>
</div>
<div class="flexGrowWrapper">
<div class="wrapper">
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
</div>
</div>
</div>
<div>
Something else here
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Note: I looked at the this similar question, but it seems to have some differences, and I couldn't get the solutions to work for me.
Add min-height: 0 to .flexGrowWrapper - see demo below:
$("button").click(function() {
$(".resize").toggleClass("small");
});
.resize {
height: 200px;
display: flex;
flex-direction: column;
overflow-y: hidden;
width: 300px;
}
.resize.small {
height: 100px;
}
.heading {
flex: 0 0 auto;
}
.flexGrowWrapper {
border: 2px solid red;
flex-grow: 1;
min-height: 0; /* ADDED */
}
.wrapper {
height: 100%;
overflow-y: auto;
}
.content {
display: flex;
flex-direction: row;
clear: both;
}
<button>
Resize
</button>
<div class="resize">
<div class="heading">
<label>Some heading that wont scroll</label>
</div>
<div class="flexGrowWrapper">
<div class="wrapper">
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
</div>
</div>
</div>
<div>
Something else here
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Why this works
Note that this is because for a column flexbox the default min-height value is auto (along the flex axis). You can see some examples of this behaviour below:
Flexbox affects overflow-wrap behavior
Why don't flex items shrink past content size?
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed 4 years ago.
I have problem with flexbox wrapping into column. The container doesn't fit the content width as seen in the snippet below.
This works if you replace both flex-flow of .wrapper and .container with flex-flow: row wrap, the height fit the content height its children, but the problem then is that the columns then flow horizontally and appear under each other, rather than flowing vertically and beside each other.
I expect the following result:
.wrapper {
display: flex;
flex-flow: column wrap;
max-height: 500px;
max-width: 500px;
overflow: scroll;
}
.container {
display: flex;
flex-flow: column wrap;
align-content: flex-start;
background-color: red;
margin: 5px;
}
.product {
margin: 3px;
min-width: 100px;
min-height: 100px;
background-color: #ccc;
text-align: center;
font-weight: bold;
line-height: 100px;
}
<div class='wrapper'>
<div class='container'>
<div class="product">0.1</div>
<div class="product">0.2</div>
<div class="product">0.3</div>
<div class="product">0.4</div>
<div class="product">0.5</div>
<div class="product">0.6</div>
<div class="product">0.7</div>
<div class="product">0.8</div>
</div>
<div class='container'>
<div class="product">1.1</div>
<div class="product">1.2</div>
<div class="product">1.3</div>
<div class="product">1.4</div>
<div class="product">1.5</div>
<div class="product">1.6</div>
<div class="product">1.7</div>
<div class="product">1.8</div>
</div>
<div class='container'>
<div class="product">2.1</div>
<div class="product">2.2</div>
<div class="product">2.3</div>
<div class="product">2.4</div>
<div class="product">2.5</div>
<div class="product">2.6</div>
<div class="product">2.7</div>
<div class="product">2.8</div>
</div>
<div class='container'>
<div class="product">3.1</div>
<div class="product">3.2</div>
<div class="product">3.3</div>
<div class="product">3.4</div>
<div class="product">3.5</div>
<div class="product">3.6</div>
<div class="product">3.7</div>
<div class="product">3.8</div>
</div>
</div>
The problem is that the .container doesn't have a width defined, so how .wrapper does have a maximum of with and it's a Flexbox, all the children (.container) will fit automatically to their parent, that's the problem.
You can solve it by setting a with to the container class.
Something like this: width: 212px;
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>