This question already has answers here:
How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
(3 answers)
Closed 7 years ago.
I have discovered what I believe to be a bug in Firefox versions 34 and above with regards to the behavior of display: flex.
I can confirm the code has always worked in all modern browsers, and still does, but Firefox 34 and the recent Firefox 35 beta, the behavior is totally inconsistent.
I have created a fiddle that demonstrates the different behavior: http://jsfiddle.net/ntkawu63/
Launch that in Firefox 34+ and it will ignore the max-width: 100% on the image. In any other browser, including Firefox 33, it will apply the max-width to the image and display normally.
<style>
.mediaContainer
{
zoom: 1;
overflow: visible;
position: relative;
}
.mediaCenterContainer
{
display: flex;
justify-content: center;
align-items: center;
}
.imageContainer
{
margin: 0 auto;
}
.imageContainer img
{
margin-bottom: 10px;
max-width: 100%;
}
</style>
<div class="mediaContainer mediaCenterContainer">
<div class="imageContainer">
<img src="http://dummyimage.com/1920x1080/000/fff.png&text=This+is+a+flex+box+test+for+Firefox+340x2B.+In+Chrome,+the+image+will+be+max-width:+1000x25.+In+Firefox+the+image+will+be+centered,+but+not+have+a+constrained+width." class="Image Tag Crop" alt="My Dog" data-realwidth="1000" data-realheight="670" data-scalewidth="944" data-scaleheight="633" />
</div>
</div>
Is there something wrong with this code, or is this something that should be raised as a bug with Mozilla?
Edit—the original answer was not fully correct
The important aspects here are
The "flex item" div.imageContainer needs a positive flex-shrink value
The (display:inline) img child of the flex item needs its own constraint to ensure it doesn't overflow the flex item
In accordance with the W3C flexbox spec*, the flex item needs some kind of definite size constraint, which we can satisfy by delcaring min-width:1px or max-width:100% on .imageContainer; otherwise, in accordance with the spec, the .imageContainer must take its content's size, i.e. the full 1000px intrinsic size of the PNG image
OP's question already satisfied point 2, but not points 1 and 3. Here is the CSS which I used:
.mediaContainer
{
overflow: visible;
width:100%;
}
.mediaCenterContainer
{
display: flex;
}
.imageContainer
{
flex-shrink:1;
min-width:1px;
}
.imageContainer img {
max-width:100%;
}
… and here's a fiddle demonstrating it.
Many thanks to #dma_k for pointing out the error in my original answer.
*I usually hate linking to W3C specs, but this section is actually quite readable; I'd encourage people to read it.
Original answer
Firefox 36 (currently dev preview) gives the behaviour you expect if you constrain the div rather than the img. You can do this using flex-shrink:
.imageContainer {
flex-shrink:1;
}
… or the short-hand flex property:
.imageContainer {
flex: 0 1 auto;
}
… or using the max-width declaration you had placed on the img, but also on the div:
.imageContainer, .imageContainer img {
max-width:100%;
}
So Firefox allows flex elements to overflow their containers. I don't know the flexbox spec that well, but it seems natural that this would be the case; that's why the flex-shrink property exists.
Related
Let's say a browser supports a particular property - but only within a specific context, is there a way to somehow tell #supports which context you're referring to?
For example, let's say I want to write a feature query for the gap property.
Now, according to the spec - CSS Box Alignment Module Level 3 -
The gap property, and its row-gap and column-gap sub-properties,
provide this functionality for multi-column, flex, and grid layout.
Is there a way to write a feature query for the gap property - specifically in the context of a flex container?
What I tried:
body {
margin: 0;
padding: 0;
border: 5px solid tomato;
}
.flex {
display: flex;
gap: 10px;
}
#supports not (gap: 10px) {
.flex > * {
margin: 0 10px;
}
.flex > :first-child {
margin-left: 0;
}
.flex > :last-child {
margin-right: 0;
}
}
.child {
background: #000;
flex: auto;
min-height: 100px;
}
<div class="flex">
<div class="child"> </div>
<div class="child"> </div>
<div class="child"> </div>
</div>
What i'm trying to do in the above snippet is to say:
If gap is not supported for my flex container - manually add margin gaps.
When I run this in Chrome, it detects that the gap property is supported1 (chrome dev tools doesn't cross it out either), so it doesn't add my fallback margin css declarations.
The thing is that Chrome only seems to support the gap property specifically for grid containers, but not for flex containers. (caniuse)
So is there a way to write a contextual feature query?
1 I went to the #supports spec to find out what constitutes a property being supported:
A CSS processor is considered to support a declaration (consisting of
a property and value) if it accepts that declaration (rather than
discarding it as a parse error). If a processor does not implement,
with a usable level of support, the value given, then it must not
accept the declaration or claim support for it.
Based on that definition, i'm guessing that Chrome claims to support the gap property because of the 'usable level of support' it has for grid containers.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
Here's a repro.
Padding off, margins off, I don't see what's causing the space circled below. I'm using normalize, it doesn't matter. I get that the vertical scroll bar changes things, but shouldn't 100% width fix this?
The screenshot is using canvas width, max-width 80% and the right hand is allowed to size by the browser. If I set to 20% it wraps below.
Update: For those too lazy to click the repro link, here's a similar snippet:
.model-div {
background: black;
display: inline-block;
height: 100vh;
max-width: 80%;
width: 80%;
}
.ui-console {
display: inline-block;
height: 100vh;
max-width: 20%;
width: 20%;
}
<body>
<div class="model-div"></div>
<div class="ui-console">
<button class="reset" onclick="model.fReset()">Reset</button>
<button class="blind-mode" onclick="model.fToggleBlind()">Toggle Blind Mode</button>
<div class="log-text-div"></div>
</div>
</body>
Browsers detect ANY amount of whitespace as 1 space, therefore it prints a space between the two items, thus causing the second item to fall. (Unless you use a workaround.)
Possible solutions:
1.Eliminate your whitespace inside your HTML. The easiest way to do this is to use something to minify your HTML, which honestly is a good practice anyway.
2.Set the font-size of your parent to zero
Parent (body, in your example.)
.parent{
font-size:0;
}
Children
.parent>*{
font-size:16px;
}
3.Float the children (Bootstrap does this in v3, before it switched to flexbox.)
.model-div,.ui-console{
float:left;
}
I have some code which currently renders properly on Chrome Stable. I have received reports of the code working incorrectly on Beta and Dev and I am able to reproduce the issue on Canary. I found this PSA which appears related to my issue. So, I am working under the assumption this is a change to more closely follow spec rather than a bug.
My software only targets Google Chrome. So, a robust solution is not necessarily needed although it would be nice to have backwards compatibility.
The setup is:
Parent element has display:flex, flex-direction: column and has max-height applied to it.
A deep descendant of the parent exceeds the max-height
And the behavior change is:
On stable, max-height is enforced and child does not break out.
On canary, max-height is disregarded and child breaks out.
I am able to prevent the child from breaking out by applying max-height to the inner element. However, this is not desirable because I would need to reduce the value for max-height by the height of footer which isn't easily done in a non-contrived example.
The following code snippet highlights my issue:
.outer {
display: flex;
flex-direction: column;
max-height: 410px;
}
.inner {
display: flex;
flex-direction: column;
}
.content {
width: 200px;
height: 500px;
background-color: green;
}
.footer {
height: 20px;
width: 200px;
background-color: red;
}
<div class='outer'>
<div class='inner'>
<div class='content'>
</div>
</div>
<div class='footer'>
</div>
</div>
Here is a screenshot of how this renders on Chrome Canary (left) vs Chrome Stable (right):
Is anyone able to tell me how to adjust this code such that inner + footer respect the max-height value of outer?
I believe I understand the issue, but I will build upon this answer more as I learn more about the solution.
This issue was introduced due to resolution of this bug filed against Chromium. The spec indicates that the default value of a flex container should be min-height: auto where as currently it is min-height: 0.
A specific comment addresses the fact that this is a breaking change against all production websites and references a suggested change:
https://code.google.com/p/chromium/issues/detail?id=426898#c17
The change is:
In case this patch breaks any website or chrome UI, the fix is likely
to add:
min-width: 0;
min-height: 0;
Applying min-height: 0 to .inner resulted in a layout consistent with what I currently see on stable.
I need to dynamically build a table to hold some data.
I've followed the usual approach of using divs with display: table, display: table-row and display: table-cell:
.tab {
display: table;
height:100%;
width: 200px;
}
.row {
height: 100%;
display: table-row;
}
.elem {
border: 1px solid black;
vertical-align: top;
display: table-cell;
height:100%;
background: blue;
}
.content {
height: 100%;
background: greenyellow;
}
<div class="tab">
<div class="row">
<div class="elem">
<div class="content">
Content
</div>
</div>
<div class="elem">
<div class="content">
Longer content that will need to wrap around eventually you know and don't you hate it when things don't end as you expect them octopus
</div>
</div>
</div>
</div>
Or view on Jsfiddle.
In most browsers I get the expected output:
However, in IE8 (and possibly later versions, I haven't tested later versions), I get the following:
The height: 100% set on the div surrounding "Content" is ignored.
According to CanIUse, IE8 should offer full support for the related display properties.
I've looked through a number of similar questions on SO without finding a working solution: most solutions either rely on Javascript (which I'm looking to avoid), use a fixed height (ibid previous) or don't work on IE8.
Unfortunately, the effect of percentage values for height on display: table-row and display: table-cell elements is undefined according to the spec:
CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values.
So while a browser may claim to offer full support for table layout, certain aspects such as percentage heights may not be consistently implemented across all browsers because there is no correct behavior. You could try raising an issue on Microsoft Connect in hopes that they will change the behavior to be interoperable, but in the meantime you will need to find a different workaround (and even then you can't guarantee the behavior will remain interoperable, even in other browsers).
To make matters worse, I just tested and this affects all versions of IE up to and including 11, which means an IE-specific hack will fall short here. If you need to use a CSS table layout, as evidenced by the fact that you need to support IE8, then a pure CSS workaround is probably not feasible.
For Internet Explorer 8-10 table-cells with height: 100%; have to be wrapped by table-row with height: 100%;.
Html for IE should be like:
table > table-row > table-cell
While other browsers will work properly with
table > table-row
or
table > table-cell
[edit] I reviewed the question again, and noticed You want to set 100% height not to the table-cells, but on the content inside it.
solution 1: So for Internet Explorer content-height is related to closest element with height set in absolute units, such as pixels, em's, if you want to use % height, you may also need to set 100% height on all parent elements, this will be html and body.
working example
solution 2: Simply add
.content {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.elem {
overflow: hidden;
}
You don't need to set height on Any of the parent elements in this case.
working example.
Hope this helps.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Hy
I'm having some trouble with flex in IE:
http://jsfiddle.net/EvvBH/
Notice that the #two element has flex: auto, which is supposed to expand it to fill the container, even if there's not enough content.
But it does that only in Chrome and Firefox. In IE it simply doesn't work.
is flex-grow not supported by IE ?
In Case someone is trying this not on body but some child div.
You can just set height: 0; on the element with the min-height.
IE just wants any height on the parent element of the flex-grow auto element.
So it could look like this:
.flex-parent{
display: flex;
min-height: 300px;
height: 0;
}
.flex-child{
flex: 1 1 auto;
}
IE requires flex: 1 1 auto
it doesn’t understand flex: 1
This happens because you use the min-height on the <body> to get full height. For internet explorer, you need to use the height property (use 100% or 100vh).
Not really sure what you're trying to achieve but that's not how the Flexbox layouts work. To use the 'flex' property on an element it needs to be within a parent element which has the 'display:flex' property.
<style>
#flexContainer {
display: flex;
}
#item1 {
width: 50px;
background: #66CC33;
flex: 1;
}
#item2 {
width: 50px;
background: #0099FF;
flex: 5;
}
#item3 {
width: 50px;
background: #66CC33;
flex: 10;
}
</style>
<html>
<div id="flexContainer">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
</div>
</html>
I will use -ms-flex: 1 1 auto;
Because IE has not full support for flex. Should be with prefix.