Height of flex container not working properly in Safari
As stated in another answer about Safari problems with flexbox, because flex is relatively new (CSS3), not all browsers work as expected. In some browsers, flex layout is partially supported or fully botched, depending on the combination of properties you apply.
In this particular case, Safari simply refuses to acknowledge max-height: 400px on the flex container. However, if the flex container isn't responding, you can get help from the parent.
This is where you are now:
section {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 400px; /* not working in Safari */
width: 400px;
padding: 10px;
border: 1px solid green;
}
Try this instead:
body {
display: flex;
max-height: 400px;
}
section {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 400px;
padding: 10px;
border: 1px solid green;
}
body {
display: flex;
max-height: 400px;
}
section {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 400px;
padding: 10px;
border: 1px solid green;
}
div {
height: 100px;
width: 100px;
background-color: red;
margin: 10px;
}<section>
<div></div>
<div></div>
<div></div>
<div style="height:200px"></div>
<div></div>
<div></div>
<div></div>
</section>Why is my Flexbox layout not working properly in Safari 15 and in Chrome?
Couple of problems:
- if you want both columns to be 50% width on all screen sizes, you need to set
flex:1 1 50%on both the p and the img tags. - if you want the img tag to scale up and down instead of always being it's full size, you need to set
width:100%;height:autoon it. - if you want to center the two elements vertically all you need is
align-items:centeron their container (where display:flex is defined) and not use any vertical padding on them
As a matter of personal preference I would set display:block on both the p and img tags, or better yet wrap them in tags to prevent any weirdness from what styles some browsers could put on them.
Code:
<div class="container4">
<p class="element4">Drummer and beat producer from Gothenburg, based in Oslo. The beats are built around Pers drumming,<br />using samples from a wide variety of genres <br />mixed with other sounds.</p>
<img class="element4-2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="wall2" />
</div>
<style>
.container4 {
font-size: 40px;
display: flex;
align-items: center;
gap: 50px;
}
.element4 {
padding-left: 50px;
flex: 1 1 50%;
}
.element4-2 {
padding-right: 50px;
flex: 1 1 50%;
width:100%;height:auto;
}
</style>
Codepen: https://codepen.io/nonsintetic/pen/poWygaY (tested on Safari and Chrome on a mac with latest everything)
Chrome / Safari not filling 100% height of flex parent
Solution
Use nested flex containers.
Get rid of percentage heights. Get rid of table properties. Get rid of vertical-align. Avoid absolute positioning. Just stick with flexbox all the way through.
Apply display: flex to the flex item (.item), making it a flex container. This automatically sets align-items: stretch, which tells the child (.item-inner) to expand the full height of the parent.
Important: Remove specified heights from flex items for this method to work. If a child has a height specified (e.g. height: 100%), then it will ignore the align-items: stretch coming from the parent. For the stretch default to work, the child's height must compute to auto (full explanation).
Try this (no changes to HTML):
.container {
display: flex;
flex-direction: column;
height: 20em;
border: 5px solid black
}
.item {
display: flex; /* new; nested flex container */
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
display: flex; /* new; nested flex container */
flex: 1; /* new */
/* height: 100%; <-- remove; unnecessary */
/* width: 100%; <-- remove; unnecessary */
/* display: table; <-- remove; unnecessary */
}
a {
display: flex; /* new; nested flex container */
flex: 1; /* new */
align-items: center; /* new; vertically center text */
background: orange;
/* display: table-cell; <-- remove; unnecessary */
/* vertical-align: middle; <-- remove; unnecessary */
}<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
</div>Safari: flexbox and min-height
I don't know why, but min-height: fit-content it works as expected:
div {
background-color: rgba(0, 0, 0, .1);
box-sizing: border-box;
margin: 4px;
padding: 4px;
}
.fixed {
height: 100%;
left: 0;
max-height: 400px;
position: fixed;
top: 0;
width: 100%;
}
.flex {
display: flex;
flex-direction: column;
/* Safari behaves like min-height: 0; */
}
.full {
flex: 1;
overflow-y: auto;
}
.big {
font-size: 200px;
line-height: 1;
margin: 0;
}
.min-fit {
min-height: fit-content;
}<div class="fixed">
<div class="flex" style="height: 100%">
<div>
A
</div>
<div class="flex full">
<div class="flex min-fit">
B_1
</div>
<div class="flex min-fit">
<p class="big">B_2</p>
</div>
<div class="flex min-fit">
<p class="big">B_3</p>
</div>
</div>
<div>
C
</div>
</div>
</div>Nested Flexbox 100% Height Not Working in Safari
Interpretation of CSS box model here is a bit strange. I'm reluctant to say who is right and who is wrong. But anyways, the trick is to create a wrapper containing a, b, and c, that has position: absolute; top: 0; bottom: 0; width: 100%; and make sure its parent has position: relative;. See codepen
Flexbox child exceeding its height in Safari
It seems like height: 100%; on #center is the cause here. Instead you can use align-items: stretch; on the parent and then flex the children to center their contents:
#body {
background: #CCC;
flex: 1;
flex-direction: row;
justify-content: center;
display: flex;
align-items: stretch;
height: 100%;
width: 100%;
}
#body > * {
display: flex;
align-items: center;
}
#center {
background: #BBB;
flex: 1;
max-width: 800px;
margin: 0 20px;
align-items: flex-start;
}
Codepen here.
Flex grid not rendered correctly on Safari - no height on flex items
Safari renders flex-shrink differently than other browsers.
Just disable it on the row items.
Add this to your code:
.row-container {
flex-shrink: 0;
}
jsFiddle demo
.container {
height: 100vh;
display: flex;
flex-direction: column;
background-color: black;
color: white;
}
.rows-container {
display: flex;
flex-direction: column;
overflow-y: auto;
background-color: blue;
}
.row-container {
flex-shrink: 0; /* new */
display: flex;
border: 1px solid cyan;
}
h1 {
margin: 0;
}
body {
margin: 0;
}<div class="container">
<h1>TEST</h1>
<div class="rows-container">
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
<div class="row-container">
<div>One</div>
<div>Two</div>
</div>
</div>
</div>Related Topics
Valid Content-Type for Xml, HTML and Xhtml Documents
How to Use the Same Meta Tag for Opengraph and Schema.Org
Remove Host Component Tag from HTML in Angular 4
Are Self-Closing Input Tags Valid in HTML 4
Remove ':Hover' CSS Behavior from Element
Listitem Disc Displaying at Vertical Bottom
Space Between Buttons with Bootstrap Class
How to Make a 2 Column Layout Where Items Starts from Top to Bottom (Not Left to Right)
How to Disable All Action Buttons While Shiny Is Busy and Loading Text Is Displayed
How Is Bootstrap V4 Loading _Reboot.Scss
Do HTML5 Script Tag Need Type="Javascript"
How to Put a <Style>...</Style> Tag Within the Body of a HTML File to Send in Email
Can Xhtml and HTML Class Attributes Value Start with a Number
A Library to Convert Ansi Escapes (Terminal Formatting/Color Codes) to HTML
CSS Show Div Background Image on Top of Other Contained Elements
Highlighting the Current Page in a List of Links Using CSS/Html