I'm running into an issue using flexbox in IE11. When using flex-direction: column the flex-items overlap:
In other browsers (chrome, safari) it looks like this:
.container {
display: flex;
flex-direction: column;
}
.flex {
flex: 1 1 0%;
}
<div class="container">
<div class="flex">
Hello
</div>
<div class="flex">
World
</div>
</div>
I've made a codepen to demonstrate the issue:
http://codepen.io/csteur/pen/XMgpad
What am I missing to make this layout not overlap in IE11?
It is caused by the 0% in your .flex class. Change it to auto then it should not be a problem:
.flex {
flex: 1 1 auto;
}
Instead of flex: 1 1 0%; use flex: 1 1 auto;
.container {
display: flex;
flex-direction: column;
}
.flex {
flex: 1 1 auto;
}
<div class="container">
<div class="flex">
Hello
</div>
<div class="flex">
World
</div>
</div>
My particular solution to this issue was that I needed to explicitly set the width on the containing element. Since flex is set to column IE11 will automatically expand the width of the container to accommodate the content of the children (remember that the flex boxes are flipped on their sides in column alignment so when they overflow they grow horizontally instead of vertically).
So my code would look like:
.container {
display: flex;
flex-direction: column;
width: 100%; // needs explicit width
}
.flex {
flex: 1 1 auto; // or whatever
}
Note also that flex: 1; compiles to flex : 1 1 0%;, so it's better (for IE users) if you explicitly write flex: 1 1 auto;, as mentioned above.
Related
This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 4 months ago.
I have prepared the following simple sample
This code does not apply max-height to .b when flex-direction is row, and .b overflows.
However, when the flex-direction is column, the max-height is applied and the .b does not overhang due to the max-height. Why is this?
I tried changing align-items:stretch to a value such as flex-start, but I did not see any change.
https://jsfiddle.net/o2fsL9y8/
https://jsfiddle.net/o2fsL9y8/1/
<div class="a">
<div class="b">
</div>
</div>
.a {
max-height: 200px;
background: red;
display: flex;
flex-direction: row; /* or column */
}
.b {
overflow: auto;
background: blue;
flex: 1 1 auto;
height: 500px;
}
edit
When a large child element is created in .b as shown below, it scrolls without overflowing, regardless of whether flex-direction is specified for row or column.
The difference in behavior looks more and more unnatural, even though it should be doing almost the same thing as the code shown above. Why does it behave this way?
https://jsfiddle.net/o2fsL9y8/3/
<div class="a">
<div class="b">
<div style="height: 500px; background-color: yellow"></div>
</div>
</div>
.a {
max-height: 200px;
background: red;
display: flex;
flex-direction: row; /* or column */
}
.b {
overflow: auto;
background: blue;
flex: 1 1 auto;
}
overflow is applied to container not child. So that when the child overflows the container maintains its state and apply the overflow property that you have specified in the container.
<div class="a">
<div class="b">
</div>
</div>
.a {
max-height: 200px;
background: red;
display: flex;
flex-direction: row; /* or column */
overflow: auto;
}
.b {
background: blue;
flex: 1 1 auto;
}
This is hiding the overflow when column and not in row because in column layout the elements have to position with respect to how much height is available. But in row layout they only cares about how much width available and if something overflows you have to deal it within .a.
I have a container which has a display flex property and i set the flex-wrap to wrap.
Problem I am having is that I am getting to much space between items.
My code:
#container {
display: flex;
flex-wrap: wrap;
width: 250px
}
.child {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto
}
<div id="container">
<div class="child">Ss</div>
<div class="child">Very very very long text text text</div>
<div class="child">Small</div>
<div class="child">Medium</div>
</div>
Image:
Can find code in action here:
Fiddle
The flex-grow property distributes free space on the line, based on the value applied.
If you give all items flex-grow: 1, each item will consume equal space.
Since you have two items with flex-grow: 1, they split the space on the line 50-50.
Remove flex-grow. Use margins or padding.
Remove the flex grow and add a gap to create a bit of a space between items.
#container {
display: flex;
flex-wrap: wrap;
width: 250px;
gap: 5px; /*emphasized text*/
}
.child {
flex-shrink: 1;
flex-basis: auto;
}
When using flexbox for styling, if the parent container is set to display: flex it will cause the <hr /> to be displayed vertically instead of horizontally.
.container {
display: flex;
flex: 1;
}
<div class='container'>
<h2>Test</h2>
<hr />
</div>
Use flex-grow: 1 or width: 100% so it will grow to match the width of the parent. You probably want to use that in combination with flex-wrap: wrap on .container if you plan on putting more flex children in .container
.container {
display: flex;
flex: 1;
}
hr {
flex-grow: 1;
/* width: 100%; */ /* or this */
}
<div class='container'>
<hr>
</div>
The reason for this is that default value of align-items is stretch so hr will get the same height as largest element in flex-container or in this case h2. And default value for justify-content is flex-start so width of hr is 0.
Easy way to fix this is to use flex-wrap: wrap on parent element and flex: 0 0 100% on hr
.container {
display: flex;
flex-wrap: wrap;
}
hr {
flex: 0 0 100%;
}
<div class='container'>
<h2>Test</h2>
<hr>
</div>
My issue is that I have a section within the article that I made a flexbox, and when I reduce the size of the browser those 3 elements in that flexbox will overlap. Any tips?
body {
display: flex;
flex-direction: column;
}
header {
background: blue;
}
main {
display: flex;
flex-direction: row;
flex: auto;
}
article {
flex: 2;
overflow-y: auto;
background: red;
}
aside {
flex: 1;
overflow-y: auto;
background: green;
}
.test {
display: flex;
flex-direction: row;
flex: auto;
align-items: stretch;
background: pink;
}
<body>
<header>
Test
</header>
<main>
<article>
<section>
test
</section>
<section class="test">
<div>
div one
</div>
div two
<div>
div three
</div>
<div>
</div>
</section>
</article>
<aside>
aside
</aside>
</main>
<footer>
</footer>
</body>
http://jsfiddle.net/zLmcyjy6/
Try adding flex-wrap: wrap to the flex container. Flex items do not wrap by default.
In reference to your website (I didn't use your fiddle demo, which has different code), each of the non-wrapping elements is a <section> child of <section class="other">, which is a row-direction, wrap-enabled flex container.
Each <section> flex item has a flex: 1 applied. This translates to:
flex-grow: 1
flex-shrink: 1
flex-basis: 0
With flex-basis set to zero, the initial main size of the flex item is 0, and the width could shrink to that degree, so there's no opportunity to wrap.
I would suggest changing flex-basis: 0 to something like flex-basis: calc(33% - 2em) (i.e., width minus approx. margin, border, padding), for wider screens. So flex: 1 1 calc(33% - 2em).
And then for smaller screens, using a media query, set flex-basis to something like:
#media screen and ( max-width: 500px ) {
.fitness, .education, .pastimes {
flex-basis: 100%;
display: flex; /* optional; for nicer alignment */
flex-direction: column; /* optional; for nicer alignment */ }
}
Alternatively, if you wanted to avoid using media queries, you could set a fixed value to flex-basis which would enable wrap, as well. Something like flex: 1 0 200px.
I have a few nested flexboxes that I want to use for a responsive website, and they work properly in firefox, but not in chrome or IE. The links should be able to wrap so that they are on top of one another when you make the screen smaller.
The links wrap properly here: http://jsfiddle.net/6796b/
But when they are in another flexbox they stop wrapping and overflow (Note: Only the green "links" aren't wrapping/stacking properly. Everything else works as intended.): http://jsfiddle.net/3525C/8/
HTML:
<div class="header">
<div class="logo">logo</div>
<div class="nav">
<div class="link">link one</div>
<div class="link">link two</div>
<div class="link">link three</div>
</div>
</div>
CSS:
.header {
text-align: center;
display: flex; /* If I take this line out the links wrap properly again, but everything else breaks. */
flex-flow: row wrap;
}
.logo {
flex: 1 0 auto;
min-width: 100px;
background-color: red;
}
.nav {
flex: 1 0 auto;
background-color: lightgray;
text-align: center;
}
.link {
display: inline-block;
background-color: green;
}
You have to apply a flex-shrink value of 1 in order for the flex item to be flexible. See edit 9.
The default being: flex: 0 1 auto which allows the flex item to "shrink to its min-size when there is insufficient space"
In your case, setting flex: 1 0 auto allows nav to grow, but the 0 prevent it from being allowed to shrink, even in overflow situations (your case here with inline-blocks).
i.e. If you want 'everything' to wrap inside a flex container, set its flex items to flex: auto;
EDIT: Changed flex: 1 1 auto; for flex: auto; for compatibility concerns, due to auto being possibly replaced by a 'main-size` keyword in the near future.