I have a container with a number of cards inside. I want the cards to wrap horizontally within a scroll-able window, which is working for the most part, but there is a gap between the 2nd row of the wrapped items and the first, instead of lining up right underneath the first row.
When I remove the overflow-y and height that enable the scroll bar, the flex wrap works as expected.
Here's the rule for that container:
.cards {
display: flex;
flex-wrap: wrap;
margin: 1rem;
/* this adds the scroll but screws
up the flex-wrap */
height: 70vh;
overflow-y: scroll;
}
Here's the JSFiddle: https://jsfiddle.net/n9w2vb0m/3/
New CSS.
Now everything is as the author wanted, no distance between cards.
.main {
display: flex;
flex-direction: column;
/*justify-content: space-between;*/
height: 100%;
}
.cards {
display: flex;
flex-wrap: wrap;
margin: 1rem;
/*height:70vh*/
overflow-y: scroll;
}
.bottom-bar{
margin-top:auto
}
Related
I'm getting some unexpected behavior with my margins using flex and I would like some help in understanding why.
I'v got some simple html like so:
<div className="dashboard">
<div className="dashboard__inner-container">Inner Container</div>
</div>
And my scss file looks like this:
.dashboard {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex: 1 1 auto;
background-color: #f4f6f8;
}
.dashboard__inner-container {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex: 1 1 auto;
width: 100%;
margin: 100px 50px;
}
What I am expecting is that the inner container will completely fill up the parent container, minus 100px on the top and bottom and 50px on the right and left. The vertical margin works as expected, but the horizontal margin actually extends out of the parent div, so that the inner container still appears to be taking up the entire width of the parent div.
I'm not sure if this is related to flexbox or not.
Here is an isolated CodePen https://codepen.io/MaxMillington2/pen/EQWZoj
When using align-items: center with column direction, the item will collapse to its content width, instead of with its default, stretch, which makes it fill its parent's width.
Additionally, when setting width: 100% to the inner, it will override the default stretch, which will make the item be 100% of parent's width + margin.
For the expected output, remove align-items: center on the outer and width: 100% on inner.
Stack snippet
html {
height: 100%;
overflow: auto;
}
.outer {
display: flex;
justify-content: center;
flex-direction: column;
background-color: #f4f6f8;
height: 100%;
}
.inner {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex: 1 1 auto;
text-align: center;
margin: 100px 80px;
}
<div class='outer'>
outer
<div class='inner'>
inner
</div>
</div>
I have the following markup and css:
https://jsfiddle.net/f0u9kpkb/
The key section is:
.grid {
border: 1px solid #bdbdbd;
display: flex;
flex: 1;
flex-direction: column;
overflow-x: auto;
height: 200px;
}
.grid .grid-body {
display: flex;
flex: 1;
flex-direction: column;
overflow-x: visible;
overflow-y: auto;
}
I would expect my code to produce a horizontal scrollbar on the outer div, and a vertical scrollbar on the inner div (on overflow), but in the example I get 2 horizontal scrollbars (despite setting overflow-x: visible on the inner scroll bar)
Is there a way to achieve the effect I am looking for
Please review the overflow property on w3schools.com
You have a couple of issues I can see going on here. The first is you may need to add more rows to your table to make it longer so that it actually scrolls (it didn't on my monitor).
The second is you are defining overflow properties for the .grid class twice.
Once here:
.grid {
border: 1px solid #bdbdbd;
display: flex;
flex: 1;
flex-direction: column;
overflow-x: auto;
height: 200px;
}
But then you have this class:
.grid .grid-body {
display: flex;
flex: 1;
flex-direction: column;
overflow-x: visible;
overflow-y: auto;
}
which changes the properties for not only the .grid-body class but also the .grid class
I removed the overflow properties from this class and added another style for the .grid-body class only so it doesn't override the .grid class properties.
.grid-body {
overflow-x: hidden;
overflow-y: visible;
}
I also added more rows to your table. This achieves your requested behavior of a vertical scroll on the inner div and a horizontal div on the outer div. See my JSFiddle.
You may want to play with the way it looks. I recommend setting the outer divs overflow to overflow: auto and the inner divs overflow to overflow: visible like I did in this JSFiddle.
you need to add right:0 CSS to .grid .grid-body Class
And
Added a new class .fix-position{
top:auto;
position:fixed;
}
Please review my JsFiddle
Please let me know, if there is any issue.
I have a ul tag with display: flex.
I need it ordered by column with flex-direction: column;, but it does not work.
CSS for the container:
#nav li.four_columns ul.sub-menu {
width: 600px;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
flex-flow: wrap;
}
CSS for the child:
#nav li.four_columns ul.sub-menu li {
flex-basis: 25%;
/* white-space: nowrap; */
/* overflow: hidden; */
/* text-overflow: ellipsis; */
/* border-bottom: none; */
}
Here is the source of your problem: flex-flow: wrap
This is a shorthand property for flex-direction and/or flex-wrap.
The initial values of this property are row nowrap.
You have only declared the flex-wrap component: wrap.
This means that the flex-direction component remains the default value: row.
Hence, your flex items are aligning horizontally in a row that wraps.
As a solution, either specify both components:
flex-flow: column wrap
OR, since you already have flex-direction: column in the rule, remove flex-flow and use:
flex-wrap: wrap
Also important: If you want flex items to wrap in column-direction, you need to define a height on the container. Without a fixed height, the flex items don't know where to wrap and they'll stay in a single column, expanding the container as necessary.
Reference:
5.3. Flex Direction and Wrap: the flex-flow shorthand
If flex direction column is not working, make sure you didn't forget to specify the height:
Example:
#container {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
.child {
width: 200px;
/* height: 200px;*/
flex: 1;
}
#child1 {
background-color: red;
flex: 2;
}
#child2 {
background-color: green;
}
#child3 {
background-color: blue;
}
<section id="container">
<div id="child1" class="child"></div>
<div id="child2" class="child"></div>
<div id="child3" class="child"></div>
</section>
I have a container named #center in which I want to display canvas and a button inside it. I want the canvas object to take all the available space (respecting the button inside the container).
This is my code:
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
height: 100%;
background-color: blue;
}
.block {
flex: 1;
}
#left {
background-color: green;
}
#center {
display: flex;
flex: 1;
flex-wrap: wrap;
align-content: flex-start;
}
#right {
background-color: orange;
}
#canvasObject {
display: block;
margin: 0 auto;
border: 1px solid;
background-color: yellow;
}
<div id="container">
<div id="left" class="block">Left</div>
<div id="center" class="block">
<canvas id="canvasObject">Your browser does not support Canvas.</canvas>
<button type="button">Click!</button>
</div>
<div id="right" class="block">Right</div>
</div>
If I do not have any button in my code, canvas occupy the full div but when I display the button, canvas does not seem to resize the desired height.
Example 1: Without button.
Example 2. With button.
How can I make that the canvas object will resize until the available height (also width but it is already doing it)?
Thanks in advance!
The problem is that you have align-content: flex-start on a row-direction flex container:
#center {
display: flex;
flex: 1;
flex-wrap: wrap;
align-content: flex-start; /* <-- source of the problem */
}
The align-content property controls the spacing between flex items in the cross-axis when there are multiple lines in the container.
When the button element is excluded, there is only one line in the flex container. In such a case, align-content has no effect (align-items would work).
But when you add the button, there are now two lines on wrap, and align-content takes over (align-items does not work).
Since align-content is set to flex-start in your code, both lines are packed to the top of the container. (For other options, try flex-end, center, space-between, space-around and stretch).
An efficient solution would be to use flex-direction: column and apply flex: 1 to the canvas.
#center {
display: flex;
flex-direction: column; /* new; stack flex items vertically */
flex: 1;
flex-wrap: wrap;
/* align-content: flex-start; <-- remove; not necessary */
}
#canvasObject {
flex: 1; /* new; consume all available free space */
/* display: block; <-- remove; not necessary */
/* margin: 0 auto; <-- remove; not necessary */
border: 1px solid;
background-color: yellow;
}
Revised Fiddle
W3C References:
8.4. Packing Flex Lines: the align-content property
8.3. Cross-axis Alignment: the align-items and align-self properties
With body's flex-direction: row;, I am expecting its align-items: stretch; will stretch the child item vertically to fill the screen height. I don't understand why this is not happening.
Here's a minimal example of what I am trying to do. I am expecting the blue block to fill the entire green body.
body {
display: flex;
flex-direction: row;
align-items: stretch;
align-content: stretch;
background-color: green;
}
.flexContainer {
display: flex;
background-color: blue;
}
<body>
<div class="flexContainer">
Hello
</div>
</body>
https://jsfiddle.net/qc6fu1b3/
It's not happening because the height of body is the height of the content.
See the red border around body in your code: https://jsfiddle.net/qc6fu1b3/2/
As you can see, align-items: stretch has no space to work.
Unlike width, which block elements fill 100% by default, heights must be defined. Otherwise, elements default to auto – the height of the content.
When you say:
I am expecting [...] the child item vertically to fill the screen height.
There's no reason to expect this with CSS default behavior. If you want the element to expand the height of the screen, then define that in your code:
html { height: 100%; }
body {
height: 100%;
display: flex;
flex-direction: row;
align-items: stretch;
align-content: stretch;
background-color: green;
}
.flexContainer {
display: flex;
background-color: blue;
}
<body>
<div class="flexContainer">Hello</div>
</body>