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.
Related
I am using display:flex in a parent element with justify-content:center and align-items:center and the parent element having multiple children. so when I want to scroll it to extreme top or extreme left, it doesn't work, its only scrolling from center to end. I want it to show center elements for the first time (which is showing) but should scroll from start to end. (Same scroll issue for flex-end).
Example Code:
.parent {
display: flex;
flex-direction: row;
justify-content: center;
width: 100px;
overflow-x: auto;
}
.child {
display: inline-block;
min-width: 50px;
border: 1px solid black;
min-height: 50px;
}
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</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 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>
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:
Equal height flex items in flex columns
(3 answers)
Closed 5 years ago.
I'm using flex to create even columns and vh to make them the same height. That's working fine but inside the columns I can have an x number of items in them. I'd like for elements in each column to be even height depending on how many items are present (using css).
1 = 100%
2 = 50%
3 = 33.33%
etc.
I know I can do this through JS but I'd like to automate this through css via flex, grid, or something elese.
I've tried replicating your problem. Use flex: 1 on .items so that each and every item take equal space (according to the problem statement).
Have a look at the snippet below:
body {
margin: 0;
}
.parent {
width: 80%;
padding: 20px;
display: flex;
border: 1px solid red;
}
.child {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
padding: 20px;
border: 1px solid blue;
height: 60vh;
}
.item {
flex: 1;
background: lightGreen;
border: 1px solid green;
}
<div class="parent">
<div class="child">
<div class="item">33.33%</div>
<div class="item">33.33%</div>
<div class="item">33.33%</div>
</div>
<div class="child">
<div class="item">50%</div>
<div class="item">50%</div>
</div>
<div class="child">
<div class="item">100%</div>
</div>
</div>
Hope this is what you are trying to achieve.
This is all you need to make it work with the Flexbox:
.flex-container {
display: flex;
}
.flex-item {
display: flex;
flex-direction: column;
flex: 1;
}
.item {
flex: 1;
border: 1px solid;
}
<div class="flex-container">
<div class="flex-item">
<div class="item">1/1</div>
</div>
<div class="flex-item">
<div class="item">1/2</div>
<div class="item">1/2</div>
</div>
<div class="flex-item">
<div class="item">1/3</div>
<div class="item">1/3</div>
<div class="item">1/3</div>
</div>
<div class="flex-item">
<div class="item">1/4</div>
<div class="item">1/4</div>
<div class="item">1/4</div>
<div class="item">1/4</div>
</div>
</div>
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>