I noticed a small difference after reducing the viewport with a layout based on flexbox containers. The following snippet contains a few links inside two containers (.container and .subcontainer). In Chrome (45 beta), the divs with class element have the same width regardless of the viewport dimension. However, in Firefox (40), the width of each div changes depending on its content.
html,
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
display: flex;
flex-direction: column;
width: 50%;
}
.element {
flex: 1 0 0;
padding: 0.5em;
text-align: center;
position: relative;
background-color: red;
margin-right: 1em;
}
.subcontainer {
flex: 0 1 auto;
display: flex;
}
.element a {
color: black;
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="subcontainer">
<div class="element"><a>abc</a>
</div>
<div class="element"><a>abcdef</a>
</div>
<div class="element"><a>abcdef</a>
</div>
</div>
</div>
</body>
</html>
I think the "Run code snippet" functionality doesn't allow to see this change, so I provide a couple of gifs showing the difference:
Chrome:
Firefox:
As you can see, the boxes share the same width in Chrome, but Firefox constrains the first box quite noticeably and the other boxes keep their proportions. What is the reason of this discrepancy and how can I fix it? I'd like to have the same width for each box. That was the purpose of using flex: 1 0 0 in the first place.
Thanks
Try to set min-width to any value you need, or just 0px:
.element
{
...
min-width: 0px;
}
Fiddle
Details
For Firefox flex items has min-width:min-content by default, as pointed here
These implementations where implementing a slightly simpler behavior
for this keyword: it computed to min-content on flex items, and it
computes to 0 on everything else.
So, if we set min-width:-webkit-min-content for Chrome, it will have the same unwanted behaviour - jsfiddle.
Related
I have an h3 element of which I don't know its width. Therefore the width is at auto - the default. But I want the text inside of it to have hyphenation. It is in flex container together with a second element. The flex container has a fixed width. This works in all browsers, except for Safari. There the hyphenation simply doesn't work at all. The text overflows and pushes also the second element out of the wrapper. In Safari it only works when I set the width of the h3 element to a specific value, for example width: 300px or width: 80%, but as I already mentioned I can't do that. it also works when I remove the display: flex, but I also don't want to do that.
Here's a short example to showcase the problem:
.card {
display: flex;
align-items: flex-start;
border: 1px solid #ddd;
width: 200px;
}
h3 {
flex: 1;
background: #ff5604;
hyphens: auto;
-webkit-hyphens: auto;
}
button {
display: inline-block;
}
<html lang="de">
<head>
</head>
<body>
<div class="card">
<h3>Versicherungsmaklerbüro/Versicherungsmaklerinnenbüro</h3>
<button>
Button
</button>
</div>
</body>
</html>
Is there a pure CSS way to make Safari behave?
NOTE: You can skip the full explanation and scroll down to TLTR section.
I want to implement a slider like in this page positioned inside a vertical flexbox. I have the following code and it represents the inner flexbox div which is positioned horizontally i.e. the slider's layout.
.img {
max-height: 100%;
}
.items {
display: flex;
flex-direction: row;
height: 100%;
}
.item {
height: 100%;
border: 1px solid black;
}
.container {
overflow: hidden;
flex: 1 1 auto;
height: 80%;
width: 100%;
}
<div class='container'>
<div class='items' style='height: 100%'>
<div class='item'>
<img class='img' src="/img1.jpg" alt="this expected to be image 1"/></div>
<div class='item'><img class='img' src="/img2.jpg" alt="this expected to be image 2"/></div>
<div class='item'><img class='img' src="/img3.jpg" alt="this expected to be image 3"/></div>
</div>
</div>
The outer flexbox div looks like this:
.main {
display: flex;
flex-direction: column;
height: 100%;
}
.title {
flex: 0 0 60px;
border: 1px solid black;
}
.slider {
flex: 1 0 auto;
border: 1px solid black;
}
<div class="main">
<div class="title">Title</div>
<div class="slider">Slider</div>
</div>
The code for the inner flexbox div is rendering well on any browser. The same is the case with the code for the outer flexbox div. The problem comes when I put the inner flexbox div inside div.slider. The browser cannot render the HTML as expected. If I set height and min-height of div.title and height of div.slider then everything works on Firefox and Chrome. Cannot test it on Safari but I have the feeling that it won't work and I'm missing something. I tested on Epiphany browser which is developed on WebKit (same as Safari) and it fails to render. I've come across similar issues in the past, working with flexbox and overflowing divs and I know that there might be a browser's issue. If I remove height and min-height of div.title and div.slider and change some CSS params I could make the page render on Chrome but still fails to render on Firefox. Am I missing something or doing something wrong? I need a cross-browser solution.
================== TLTR ==================
Here it is a full example - https://jsfiddle.net/SitkaCharley/xht9vaef/10/
I expect the images in div.slide to resize and fit inside it even though they are different sizes. Instead I see images with different sizes and a verticall scroll bar when images are too big. My understanding is that since the .main div is instructed to take 100% of windows height the .title will take 60px and .slider will take the rest of parent's height (see .slider's flex item css instructions). Then the .container is expected to take 80% out of parent's height and .img's max-height: 100% will force to resize images to the height of their parents which is the height of .container.
I have two divs:
top div contains a long text that takes up several lines
lower div has min-height and flex-grow: 1
When I reducing the window to the scroll appeared, then in chrome everything is displayed correctly. But in IE11 top div is reduced to one line, and its text is on top of the bottom div.
I can fix it only with set some width for content of top div (it work with fixed width, or calc width, but not work with percentage width)
How can I fix it without setting width or with percentage width (width:100%)?
body,
html {
height: 99%;
padding: 0;
margin: 0;
}
.flexcontainer {
width: 25%;
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid lime;
}
.allspace {
flex-grow: 1;
min-height: 300px;
background-color: yellow;
}
.longtext {
background-color: red;
}
.textcontainer {
border: 1px solid magenta;
/*IE work correctly only when specified width. by example: width:calc(25vw - 2px);*/
}
<div class="flexcontainer">
<div class="longtext">
section 1 with long name section 1 with long name section 1 with long name
</div>
<div class="allspace">
all space
</div>
</div>
jsfiddle: https://jsfiddle.net/tkuu28gs/14/
Chrome:
IE11:
IE11 is full of flex bugs and inconsistencies with other browsers.
In this case, the source of the problem is flex-shrink.
IE11 is rendering flex items oddly after applying flex-shrink: 1 (a default setting), which causes the lower item to overlap its sibling above. This problem doesn't occur in other major browsers.
The solution is to disable flex-shrink. It fixes the problem in IE11 without changing anything in other browsers.
Add this to your code:
.longtext {
flex-shrink: 0;
}
revised fiddle
You may also want to look into:
setting min-width: auto on flex items, as IE11 has a different minimum size default than newer browsers. See the "Browser Rendering Notes" section in my answer here: Why don't flex items shrink past content size?
setting the container to width: 100%, as IE11 may not do this automatically to block-level flex containers. Text in a flex container doesn't wrap in IE11
The use of flex-shrink: 0; mentioned in the accepted answer works to prevent overlapping. However, I'm using like flex: 0 1 15% as I intend to allow shrinking and this renders nicely in other browsers like MS Edge, Chrome, and Firefox, but not in IE 11.
To apply no shrinking (flex-shrink: 0) only for IE 11, I used the following instead as the -ms- is vendor-specific:
-ms-flex-negative: 0 !important;
problem solved:
body, html {
height: 100vh;
padding:0;
margin:0;
}
.flexcontainer{
width:25%;
display: flex;
height: 100%;
flex-flow: column;
border: 1px solid lime;
}
.allspace{
flex-grow:1;
background-color: yellow;
}
.longtext{
background-color: red;
//EDIT
flex-grow: 0;
min-height: 100px;
}
.textcontainer{
border:1px solid magenta;
/*IE work correctly only when specified width. by example: width:calc(25vw - 2px);*/
}
EDIT (screenshots on IE11)
I'm having trouble with CSS3 columns, they don't work as I would have expected in Chrome 53.0.2785 - they work as I'd expect in Firefox 49, IE11, EDGE 38.14393
The first two child DIVs of my "container" DIV display under each other in Chrome, but next to each other in Firefox
HTML:
<div class="container">
<div>
Some content 1
</div>
<div>
Some content 2
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
.container {
column-width: 100px;
column-gap: 12px;
}
.container > div {
display: inline-block;
width: 100px;
border: 1px solid black;
padding: 20px;
}
Test it here: https://jsfiddle.net/s7cfbqzt/3/
Now, there's a few strange things happening in Chrome:
if I only remove "display: inline-block", Chrome breaks up the DIVs (even the border gets distributed) - Firefox does not
Please note that I can't set column-count in the parent (which in combination with removing inline-block seems to kind-of-work) as it's supposed to be a fluid layout. The height of each DIV is dynamic as well, so if that's a requirement I'd have to write some JS for this (but I'd prefer to have this working without JS).
if I remove border-sizing and all properties of the child DIVs it works as expected, but as soon as I start filling the inner DIVs with some other content (that might have border or paddings or box-shadows), it breaks again
If I add a third child DIV
<div>Some content 3</div>
there will be columns in Chrome, but is displayed as
1..3
2
A fourth DIV would then be display underneath DIV3, a fifth DIV in the first "row" again.
1..3..5
2..4
Is this a bug in Chrome or am I doing something wrong?
Chrome is actually probably the one browser doing it correctly:
https://drafts.csswg.org/css-break/#widows-orphans
Name: orphans, widows
Value: <integer>
Initial: 2
IE 11, EDGE and Firefox (49) do not (yet?) support widows and orphans, even though http://caniuse.com/#feat=css-widows-orphans claims that IE11 and EDGE do support it - see https://jsfiddle.net/s7cfbqzt/13/ in IE11 and EDGE. If IE and EDGE actually would support it, they'd set the initial values to 1 instead of 2.
Fix for my use-case is to add
orphans: 1;
widows: 1;
to the container-class in CSS.
Thanks #Jay for taking the time to look into this!
You can achieve this by floating the divs within the container, you will also need to float their container, or they won't display correctly.
* {
box-sizing: border-box;
}
.container {
column-width: 100px;
column-gap: 12px;
float: left;
}
.container > div {
display: inline-block;
width: 100px;
border: 1px solid black;
padding: 20px;
float: left;
}
EDIT:
then instead of using column-gap, i would apply margin left to each of the divs inside the container. like so;
.container {
width: 100%;
float: left;
}
.container > div {
width: 100px;
border: 1px solid black;
padding: 20px;
float: left;
margin-left: 12px;
}
.container > div:first-child {
margin-left: 0;
}
EDIT:
If the height does not need to match - remove column-width from the container div. see https://jsfiddle.net/0sz6t3ft/1/
In IE 11 when an item items don't properly center if they have maximum width property. This example however works in Chrome and Firefox.
JS Bin
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
width: 100%;
}
.red {
background-color: red;
flex-grow: 1;
display: flex;
max-width: 200px;
}
<div class="container">
<div class="red">non centered box</div>
</div>
It is a bug. But according to IE Feedback it was supposed to be fixed already.
As a workaround, you can remove flex-grow: 1; if you don't have to use it.
Explicitly set width: calc(100%); so IE knows the box width and center it properly.
I have had this issue as well. In my case I wanted flex-grow but still wanted to limit the max-width. What I do is wrap any css I don't want IE11 to see in #support. IE11 does not support this rule and ignores its contents completely. I will just check for something that has been around forever like text-align so all the other modern browsers can apply the css rule. You can do this for anything, I just discovered this while trying to figure out an answer to this issue.
#supports(text-align:center) {
div {
max-width: 350px;
}
}