using OSX 10.12.4 safari version 10.1 and flex row wrap is not working as expected. I have seen the other questions on here about row wrap not working in safari, but it has not helped me so far.
Here is my html:
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.header {
flex: 1 100%;
-webkit-flex: 1 100%;
-moz-flex: 1 100%;
}
.body {
flex: 1;
-webkit-flex: 1;
}
<div class="container">
<div class="header">
header
</div>
<div class="body">
body
</div>
</div>
Here is a fiddle example
Do the same in .body as you did in the .header.
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.container>div {
flex: 1;
-webkit-flex: 1 100%; /* safari fix */
}
<div class="container">
<div class="header">
header
</div>
<div class="body">
body
</div>
</div>
Related
I have the following CSS and HTML as the minimal to reproduce the issue. On Chrome all good. IE11 not. Is there a way to fix the CSS and HTML so it works on both Chrome and IE11?
<html>
<style>
.max-box {
background-color: #00e;
width: 100px;
max-height: 80%;
padding: 5px;
display: flex;
flex: 1 1 auto;
}
.fixed-box {
background-color: #00e;
width: 100px;
height: 100px;
padding: 5px;
display: flex;
flex: 1 1 auto;
}
.wrapper {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.content {
background-color: #0e0;
display: flex;
flex: 1 1 auto;
flex-direction: column;
overflow: auto;
}
.footer {
background-color: #e00;
display: flex;
flex: 0 0 auto;
}
</style>
<body>
<div class="max-box" style="float: left">
<div class="wrapper">
<div class="content">
<span>a1</span><span>a2</span>
</div>
<div class="footer">
<span>b1</span><span>b2</span>
</div>
</div>
</div>
<div class="max-box" style="float: left">
<div class="wrapper">
<div class="content">
<span>a1</span><span>a2</span><span>a3</span><span>a4</span><span>a5</span><span>a6</span><span>a7</span><span>a8</span><span>a9</span>
</div>
<div class="footer">
<span>b1</span><span>b2</span>
</div>
</div>
</div>
<div class="fixed-box">
<div class="wrapper">
<div class="content">
<span>a1</span><span>a2</span><span>a3</span><span>a4</span><span>a5</span><span>a6</span><span>a7</span><span>a8</span><span>a9</span>
</div>
<div class="footer">
<span>b1</span><span>b2</span>
</div>
</div>
</div>
</body>
</html>
So the requirements are what Chrome is behaving:
Box 1 will not take up the space below if the content is little.
Box 2 will take up at most 80% height of the browser and the content is scrollable. Responsive if the browser height changes.
Box 3 is fixed height and the content is scrollable and spaced the same as box 2.
What IE11 failed are:
Box 1 and Box 2 does not make content scrollable when browser height changed to smaller than the content.
Box 3 content is scrollable but the values all cramped.
as this seems to be unanswered I will try to give you my two cents. IE and other browsers usually need autoprefixer for flexbox to work properly. Try the following, which is exactly your code run trough autoprefixer
.max-box {
background-color: #00e;
width: 100px;
max-height: 80%;
padding: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.fixed-box {
background-color: #00e;
width: 100px;
height: 100px;
padding: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.content {
background-color: #0e0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: auto;
}
.footer {
background-color: #e00;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
I have following situation where css flex based masonry displayed images overflowing the parent div's width. It is supposed to go downwards like a normal Masonry.... but I can't figure it out how to fix this.
I wrote my code like below...
HTML
<div class="mansory-gallery">
<div class="item">
<img src="http://minoboshitaro.com/wp-content/uploads/2017/11/51AEWKP5CQL._SX339_BO1204203200_.jpg">
</div>
</div>
CSS
.mansory-gallery {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-flow: column wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
max-height: 100vw;
flex-direction: column;
}
.item {
width: 28%;
padding: 15px;
margin: 5px;
text-align: center;
display: flex;
flex: 1 1 auto;
}
.mansory-gallery a img {
max-width: 100%;
transition: .8s opacity;
height: auto;
}
Please let me know how to solve this!
Thank you for your time!
Try using justify-content: space-around; instead of margins.
.mansory-gallery {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-flow: column wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
max-height: 100vw;
flex-direction: column;
justify-content: space-around;
}
.item {
width: 28%;
flex-grow: 1;
text-align: center;
display: flex;
flex: 1 1 auto;
}
.mansory-gallery a img {
max-width: 100%;
transition: .8s opacity;
height: auto;
}
Example - https://codepen.io/nhensh/pen/OZRgYa
Aside is used for a complete section left in a webside.
* {
padding: 0px;
margin: 0px;
}
html,
body {
width: 100%;
height: 100%;
color: #00374b;
font-family: Verdana, sans-serif;
font-size: 0.9em;
background-color: #FFFFFF;
}
/*First big flexbox container that places the elements from top to down (column)*/
.flex_container {
width: 100%;
height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-flow: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
/*Second big flexbox container for the ASP form from left (aside) to right (main section) (row)*/
.layout_main {
flex: 1 auto;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-flow: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.layout_aside {
flex: 1 auto;
background-color: #004664;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-flow: column;
flex-direction: column;
padding: 10px;
}
.element {
flex: 1 auto;
}
.layout_main_content {
flex: 1 1 90%;
min-width: 500px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-flow: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
article{
flex: 1 auto;
}
<body class="flex_container">
<div class="layout_main">
<aside class="layout_aside" id="aside_menu" runat="server">
<div class="element">Test 1</div>
<div class="element">Test 2</div>
<div class="element">Test 3</div>
</aside>
<div class="layout_main_content">
<article>Article1</article>
<article>Article2</article>
</div>
</div>
</body>
For this code the flexbox definition is not working for aside. If I remove the runat="server" the flexbox is again recognized.
Any suggestion or resolution. I tried to put the runat server to a different div but this doesn´t help.
If I have a flexbox container with a fixed child, but it does not seem to wrap elements correctly:
<div id="parent">
<div id="child-1"></div>
<div id="child-2"></div>
</div>
#parent {
display: flex;
flex: 1;
flex-direction: column;
flex-wrap: wrap;
}
#child-1 {
display: flex;
flex: 1 0 auto;
position: fixed;
}
#child-2 {
display: flex;
flex: 1 1 auto;
overflow-y: scroll;
}
Add position:sticky; and top:0; to the #child-1 instead of position fixed;
I have fixed this with:
parent:
display: flex;
flex-direction: column;
height: 100%;
child 1:
display: flex;
flex: 1 0 auto;
justify-content: space-between;
flex-wrap: wrap;
child 2
display: flex;
flex-wrap: wrap;
flex: 1 1 auto;
overflow-y: auto;
I have two divs in a container like this:
<div class="container">
<div class="div-a"> Hello </div>
<div class="div-b"> Lorem </div>
</div>
And I have set the container to display:flex and flex-direction to column.
I aim to align the 2 divs on top of each other. This works fine on Firefox but not on WebKit (Chrome/Safari). On WebKit, the columns align next to each other instead.
Here is a jsFiddle so you can see.
My CSS is:
.container {
width:100%;
float:left;
flex-direction: column;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.div-a {
background:lightgreen;
order:2;
width:100%;
float:left;
}
.div-b {
background:lightblue;
order:1;
width:100%;
float:left;
}
Why is this not working on WebKit?
In order to get flex to work across browsers (especially Safari desktop and iOS ), you need to prefix all the related properties. Visit here for browser support details.
Example of flex-direction: column;
.container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.a {
background: lightgreen;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.b {
background: lightblue;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
<div class="container">
<div class="a">A</div>
<div class="b">B</div>
</div>
Example of flex-direction: row;
.container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.a, .b {
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.a {
background: lightgreen;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.b {
background: lightblue;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
<div class="container">
<div class="a">A</div>
<div class="b">B</div>
</div>