As far as I've been able to gather, if working with IE10 / IE11 I should be able to use the standardized flex terms.
I have a container div and 2 child divs.
The 2 child divs are not larger than 400px, so there should always be enough room for the justify-content: space-between.
I want the first child to be all the way at the top and the second child to be all the way at the bottom.
This works in Chrome and Firefox but not in IE, and I have no idea why.
Any comments and feedback are welcome.
<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; background-color: lightyellow;">
<div style="background-color: red;">
<h2>Title (variable height)</h2>
<p>Summary (variable height)</p>
</div>
<div style="background-color: orange;">
<img src="http://avatarbox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg" />
</div>
</div>
https://jsfiddle.net/akxn68vm/
IE 10 & 11 have a number of issues with rendering flexbox properly.
Here's one: A flex container doesn't respect the min-height property in these browsers.
A simple solution is to make your flex container also a flex item.
Just add this to your code (no other changes necessary):
body {
display: flex;
flex-direction: column;
}
revised fiddle
More info: https://github.com/philipwalton/flexbugs#flexbug-3
According to this bug IE11 doesn't render the items correctly when using min-height in flexbox.
It seems like the problem was solved in Edge, but IE10-11 will not work.
This is a bug in IE10/11. You can find the information at https://github.com/philipwalton/flexbugs#flexbug-3
To fix this bug in IE10/11, add a wrapper element around the flex container that is itself a flex container. In your example, you can add display flex to body tag. And add width 100% style in the container div
Related
I am having a chrome specific issue with removing elements from a flexbox item from a height specified flexbox container. This is causing strange display issues for another scrollable flexbox item within that container. It seems that the scrollable item is not properly refresh/repainting, while it is growing.
This is a fairly specific question that's easier to see in the example.
https://jsfiddle.net/gajv6snz/
Note: This is not specific to removing the elements using javascript. Manually deleting them in DevTools causes this also.
<div id="container">
<div id="box1"></div>
<div id="box2"></div>
</div>
#container {
height: 300px;
display: flex;
flex-direction: column;
}
/* Removing elements from #box1 causes display issues with box2 */
#box2 {
overflow-y: scroll;
}
I expect that bottom scrollable flexbox item to take over the full container once the top flexbox item has been emptied. I want the container to remain the same size throughout.
i'm working on a layout and I can't figure out how to get these columns to be equal height, specifically the green areas when the text wraps. Can you help?
My html template, with more .category-containers inside...
<div class="flex-container">
<div class="category-container">
<a href="#" class="img-gallery-col medium-internal-page-static-image" style="background-image: url('http://placehold.it/800/800');">
</a>
<h4 class="text-center">Salads & Sides</h4>
</div>
</div>
My css for the flex-container is...
.flex-container {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
Here's a coden link if that helps http://codepen.io/johnsonjpj/pen/evopaV?editors=1100
EDIT: I have updated the pen and added a height to the category-container and also made it display: flex. Then I added flex-grow to the h4. How can I get it vertically center inside that green area?
You have no heights defined anywhere in your code. Therefore, there is no reason for your text blocks to have equal height. Their height is defined by the content, which is a default setting (height: auto).
You need to define a height somewhere in your layout, whether high up on the body element or on a container element closer to the text. You can then establish equal heights and use flex properties for vertical and horizontal alignment.
As you resize the page, there's points which all of the text boxes are on one line, and points where they're all on two lines (resize browser to wide/narrow).
Since you have this issue in a middle ground of sorts, I would recommend using CSS #media queries to change the height property of .category-container h4 to predetermined values which you know will look okay.
As far as I've been able to gather, if working with IE10 / IE11 I should be able to use the standardized flex terms.
I have a container div and 2 child divs.
The 2 child divs are not larger than 400px, so there should always be enough room for the justify-content: space-between.
I want the first child to be all the way at the top and the second child to be all the way at the bottom.
This works in Chrome and Firefox but not in IE, and I have no idea why.
Any comments and feedback are welcome.
<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; background-color: lightyellow;">
<div style="background-color: red;">
<h2>Title (variable height)</h2>
<p>Summary (variable height)</p>
</div>
<div style="background-color: orange;">
<img src="http://avatarbox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg" />
</div>
</div>
https://jsfiddle.net/akxn68vm/
IE 10 & 11 have a number of issues with rendering flexbox properly.
Here's one: A flex container doesn't respect the min-height property in these browsers.
A simple solution is to make your flex container also a flex item.
Just add this to your code (no other changes necessary):
body {
display: flex;
flex-direction: column;
}
revised fiddle
More info: https://github.com/philipwalton/flexbugs#flexbug-3
According to this bug IE11 doesn't render the items correctly when using min-height in flexbox.
It seems like the problem was solved in Edge, but IE10-11 will not work.
This is a bug in IE10/11. You can find the information at https://github.com/philipwalton/flexbugs#flexbug-3
To fix this bug in IE10/11, add a wrapper element around the flex container that is itself a flex container. In your example, you can add display flex to body tag. And add width 100% style in the container div
I've set up a jsfiddle to demonstrate the problem here:
http://jsfiddle.net/x0eo3aeo/2/
HTML:
<div class="flexContainer">
<div class="flexCol1">aaa</div>
<div class="flexCol2"><div style="width:100px; background-color:yellow;">bbb</div></div>
<div class="flexCol3"><div style="width:250px; background-color:pink;">Hello world, some long text here to make this element stay at 250px while splitting onto multiple lines.</div></div>
</div>
CSS:
.flexContainer {
display: flex;
width: 100%;
flex-direction: row;
}
.flexCol1, .flexCol3 {
flex: 1;
background-color: green;
}
Firefox actually behaves exactly how I want. Columns 1 and 3 flex equally until the width of column 3 hits the fixed size of its child div, and then only column 1 is flexed. However, in Chrome, both columns continue to flex equally and the child content of column 3 overflows.
Is there a way to achieve the Firefox-style behaviour in a cross-browser way?
You should be able to achieve the Firefox behavior in Chrome by adding min-width: -webkit-min-content; to .flexCol3. This prevents it from shrinking below its min-content width. (This is what's supposed to happen by default, due to min-width:auto introduced in the flexbox spec, but that hasn't been implemented in Chrome yet.)
As noted in comments below, IE doesn't seem to have a min-content width keyword implemented, so you might have to do something hackier there (like min-width: 250px). Fortunately, IE's next release (12?) does have min-width:auto implemented, so this should Just Work like Firefox there, I'm told.
When using css flexbox the three main browsers appear to behave entirely differently in certain areas.
In this case I am trying to create a grid of images:
<div class="container">
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
</div>
.container {
display:inline-flex;
flex-flow : column wrap;
align-content : flex-start;
height : 100%;
}
In this example I need a container, itself containing several div elements set up to flow from top to bottom and wrapping when they reach the bottom. Ultimately providing me with columns of photos.
However I need the container to expand horizontally to accommodate the wrapped elements:
Here is a quick jsFiddle to demonstrate.
The behaviour is as follows:
IE 11 - Correct, the container stretches horizontally to wrap each column of wrapped elements
Firefox - The container only wraps the first column of elements, with the rest overflow out.
Chrome - The container always stretches to fill the width of its parent, whatever that may be.
In this instance I would like to achieve the behaviour of IE11 in the other two browsers. Therefore my question is, how can I make a flexbox container expand horizontally to match its column wrap contents.
Thanks in advance.
It's curious that most browsers haven't implemented column flex containers correctly, but the support for writing modes is reasonably good.
Therefore, you can use a row flex container with a vertical writing mode. This will swap the block direction with the inline direction, and thus the flex items will flow vertically. Then you only need to restore the horizontal writing mode inside the flex items.
.container {
display: inline-flex;
writing-mode: vertical-lr;
flex-wrap: wrap;
align-content: flex-start;
height: 350px;
background: blue;
}
.photo {
writing-mode: horizontal-tb;
width: 150px;
height: 100px;
background: red;
margin: 2px;
}
<div class="container">
<div class="photo">1</div>
<div class="photo">2</div>
<div class="photo">3</div>
<div class="photo">4</div>
<div class="photo">5</div>
<div class="photo">6</div>
<div class="photo">7</div>
<div class="photo">8</div>
<div class="photo">9</div>
</div>
This approach may have its own bugs in edge cases, especially if you mix advanced layout techniques like floats and nested flexboxs. But for most cases it seems to work properly.
The spec says that what you're doing should work, but it's implemented incorrectly in every major browser besides Internet Explorer / Edge, making multi-line inline-flex column layouts useless at present for most developers. Here's a Chromium bug report providing an example that is effectively identical to yours, and noting that it renders incorrectly in Chrome, Safari, and Firefox.
The argument from spec is more complicated than I'm able to understand, but the key point is that Flexible Box Layout Module Level 1 spec defines the intrinsic cross-size of a flex container (that is, the intrinsic height of a flex-direction: row flex container or the intrinsic width of a flex-direction: column flex container) in the section Flex Container Intrinsic Cross Size. There, it is stated:
For a multi-line flex container, the min-content/max-content cross size is the sum of the flex line cross sizes
That is, the intrinsic width of a flex-direction: column flex container should be the sum of the widths of its columns, as you'd expect. (There is more complexity than this, and I don't understand it all, but I believe the above to be broadly true.) However, Chrome, Firefox, and Safari all calculate this width incorrectly; setting width: min-content or width: max-content on a column wrap flex box in Chrome, you can clearly see that the width is set to the width of the widest single element.
A silly Chrome-specific workaround exists, but is probably best avoided. Until the bug is fixed, this part of the Flexbox model simply doesn't work as designed and there's no clean solution available.
It seems this issue cannot be solved only with CSS, so I propose you a JQuery solution
container width = position of the last child - position of the container + width of the last child (including margin)
Code :
$(document).ready(function() {
$('.container').each(function( index ) {
var lastChild = $(this).children().last();
var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true);
$(this).width(newWidth);
})
});
Demo :
http://jsfiddle.net/qzea320L/
You have a column layout distribution with a fixed height container.
When you set the flex-direction to column you define the Vertical axis as the main axis.
In flexbox that means it will fill up the available height and then create a new column.
In this JSBIN I use javascript to change the container's height and, because of that, you will see the child items move.
PS: you shouldn't rely on IE behavior since their flex support is recent.
Another possible approach:
.container {
column-count: 2; /*or whatever */
}
.container > div {
display: inline-block;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/column-count
You may also need to adjust margin-top of .container > div:first-child if they don't align to the top.