Menu
I have a strange bug that I seem to keep stumbling upon and I'd like to know what is actually going on here. I have a flexbox container (row wrap) with two child divs (flex: 1). When I have a heading that I don't want to wrap (white-space: nowrap), IE 11's containing div doesn't respect its width and shrinks to less than the header width. This seems to work just fine in Chrome, but Safari and IE seem to not respect the heading's width. What's going on here?
Here is the js bin: https://jsbin.com/bowodiz/edit?css,output
I have put the main styles and markup inline below for convenience sake.
HTML:
<div class="flex-container">
<div class="left">
<div class="heading">Here is a heading that shouldn't wrap</div>
<div class="sub-text">This is just some content that should wrap just fine ..</div>
</div>
<div class="right">
<div class="heading">Here is a heading that shouldn't wrap</div>
<div class="sub-text">This is just some content that should wrap just fine ...</div>
</div>
</div>
CSS (partial):
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.flex-container > div {
flex: 1;
}
.heading {
white-space: nowrap;
}
Desired:
IE/Safari Behavior:
518
Safari versions 9 and up support the current flexbox spec without prefixes. Older Safari versions, however, require -webkit- prefixes. Sometimes min-width and max-width cause alignment problems which can be resolved with flex equivalents.
Note also that Internet Explorer 11 supports the modern display: flex specification however it has a number of bugs in the implementation.
A flexbox item can be set to a fixed width by setting 3 CSS properties — flex-basis, flex-grow & flex-shrink. flex-basis : This property specifies the initial length of the flex item. flex-grow : This property specifies how much the flex item will grow relative to the rest of the flex items.
(Vote me up, vote me down... but I am just saying, what helped me ¯_(ツ)_/¯)
Changing the flex-property on the child element from
flex: auto
to:
flex: 100% (or 1 1 100%, if you prefer)
solved the thing for me.
Issue only existed under IE11 by the way, not under Edge.
136
Instead of flex: 1 use flex-grow: 1; flex-basis: 0; or specify all 3 values that you want for the shorthand. And if you specify flex-basis make sure you specify a unit. https://jsbin.com/ketolifuhu/edit?html,css,output
Here's a good article that covers some of the bugs and inconsistencies https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
:root {
--dark-primary-color: #303F9F;
--default-primary-color: #3F51B5;
--light-primary-color: #C5CAE9;
--text-primary-color: #FFFFFF;
--accent-color: #FF4081;
--primary-text-color: #212121;
--secondary-text-color: #757575;
--divider-color: #BDBDBD;
--box-size: 150px;
font-family: Roboto, 'sans-serif';
font-size: 20px;
letter-spacing: 1.25px;
font-weight: 100;
color: white;
}
body {
background-color: #BDBDBD;
}
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.flex-container > div {
flex-grow: 1;
margin: 10px;
box-shadow: 2px 2px 6px 1px rgba(0,0,0,.2);
padding: 30px;
flex-basis: 0;
}
.left {
background-color: #3F51B5;
}
.right {
background-color: #3F51B5;
}
.heading {
letter-spacing: .5px;
font-weight: 400;
white-space: nowrap;
}
.sub-text {
margin-top: 20px;
font-size: 14px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<div class="flex-container">
<div class="left">
<div class="heading">Here is a heading that shouldn't wrap</div>
<div class="sub-text">This is just some content that should wrap just fine and I don't really care what it says, but it'll just wrap just fine and that behavior should be handled by the heading.</div>
</div>
<div class="right">
<div class="heading">Here is a heading that shouldn't wrap</div>
<div class="sub-text">This is just some content that should wrap just fine and I don't really care what it says, but it'll just wrap just fine and that behavior should be handled by the heading.</div>
</div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
