Safari encounters issues with Flexbox child elements that exceed their assigned height dimensions

Encountering a peculiar Flexbox height dilemma specific to Safari.

Interestingly, in Chrome, the center div perfectly fills the 100% height of the body div.

Contrastingly, on Safari, the center div extends beyond the 100% height of its container; seemingly claiming an additional 50% of the hero element above it.

Is this issue familiar to anyone?

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#container {
  height: 100%;
  background-color: #EEE;
  flex: 1;
  flex-direction: column;
  display: flex;
}

#hero {
  display: flex;
  flex-direction: column;
  background-color: #DDD;
  width: 100%;
  height: 100px;
  text-align: center;
}

#body {
  background: #CCC;
  flex: 1;
  flex-direction: row;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

#center {
  background: #BBB;
  flex: 1;
  height: 100%;
  max-width: 800px;
  margin: 0 20px;
}
<div id="container">
  <div id="hero">hero</div>
  <div id="body">
    <a href="#">Left</a>
    <div id="center">center</div>
    <a href="#">Right</a>
  </div>
</div>

htmlcsssafariflexbox

Answer №1

It appears that the issue is stemming from the height: 100%; property on #center. To resolve this, you can utilize align-items: stretch; on the parent element and then align the children elements 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;
}

View the code on Codepen here.

Answer №2

By default, flex items have a setting of flex-shrink: 1, allowing them to shrink to fit inside the container. While Chrome and Firefox adhere to this rule, Safari seems to have its own interpretation.

To ensure cross-browser compatibility, consider the following solution:

#body {
  height: calc(100% - 100px);
}

This adjustment will give #center the proper sizing relative to its parent element.

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#container {
  height: 100%;
  background-color: #EEE;
  flex: 1;
  flex-direction: column;
  display: flex;
}

#hero {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  background-color: #DDD;
  width: 100%;
  height: 100px;
  text-align: center;
}

#body {
  background: #CCC;
  flex: 1;
  flex-direction: row;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 100px);  /* ADJUSTMENT */
  width: 100%;
}

#center {
  background: #BBB;
  flex: 1;
  height: 100%;
  max-width: 800px;
  margin: 0 20px;
}
<div id="container">
  <div id="hero">hero</div>
  <div id="body">
    <a href="#">Left</a>
    <div id="center">center</div>
    <a href="#">Right</a>
  </div>
</div>

Alternatively, you can eliminate the height rule on the #center element entirely and utilize align-self: stretch instead.

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#container {
  height: 100%;
  background-color: #EEE;
  flex: 1;
  flex-direction: column;
  display: flex;
}

#hero {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  background-color: #DDD;
  width: 100%;
  height: 100px;
  text-align: center;
}

#body {
  background: #CCC;
  flex: 1;
  flex-direction: row;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 100px); /* ADJUSTMENT */
  width: 100%;
}

#center {
  background: #BBB;
  flex: 1;
  /* height: 100%; */
  align-self: stretch; /* ADJUSTMENT */
  max-width: 800px;
  margin: 0 20px;
}
<div id="container">
  <div id="hero">hero</div>
  <div id="body">
    <a href="#">Left</a>
    <div id="center">center</div>
    <a href="#">Right</a>
  </div>
</div>

Answer №3

To ensure compatibility with various browsers, it is essential to include the necessary prefixes. For instance:

#hero {
  display:-webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  background-color: #DDD;
  width: 100%;
  height: 100px;
  text-align: center;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 1: selecting all checkboxes within an extensive ng-repeat list

I am encountering a performance issue with a table that includes hundreds of rows, each containing a checkbox. When I use the "Check All" option at the top to select all checkboxes in one go, the browser becomes unresponsive, especially in IE11 which is th ...

javascripthtmlangularjscheckbox

Styling content in a CSS file and then rendering it as a

My current project involves converting a webpage into a PDF file and I am using @page @bottom-left to insert text in the bottom left corner. @page {size: portrait A4; @bottom-left {content: "Some text to display at the bottom left. Some additional text ...

htmlcsspdf

CSS and JavaScript issues causing compatibility errors with Internet Explorer

Recently, I've been working on a portfolio website just for fun, and I'm encountering compatibility issues specifically in Internet Explorer. Surprising, right? The issue seems to be stemming from the flipcard.css and flipcard.js files. While oth ...

javascripthtmlcssinternet-explorer

"Utilizing the React library to implement an HTML component with a styled radio input that

My radio button issue: I have two radio buttons, one is checked by default. When trying to switch the selection by clicking on the unchecked option, I have to click twice. How can I resolve this problem? <label>YES</label> <input type={&a ...

htmlreactjsradio-buttonchecked

When using jquery, the .css("border-color") method fails to provide a return value

I came up with the jquery javascript below $(document).mousemove(function(event) { var element = event.target; $(element).css("border","black solid 1px"); }); $(document).mouseout(function(event) { var element = event.target; console.log ...

jquerycssborder

$_POST is unable to read POST parameters when using AJAX

I've been facing an issue with sending data to my PHP script. Interestingly, everything works smoothly when using POSTMAN and the results are displayed correctly. However, when attempting to send the data through AJAX in my HTML project, the PHP scrip ...

phphtmlajax

Unlock the Full Potential: Enabling Javascript's Superpowers through PHP Execution

I specialize in PHP and JavaScript. Currently, I am attempting to incorporate JavaScript functionalities into my PHP code. However, I am encountering an issue where the code is not functioning properly. The PHP code that executes the JavaScript code is as ...

javascriptphphtml

Automatically changing the URL of Vue image assets

Is there a way to prevent the URL from changing every time we release in a Vue project when using an image from another project? In my Vue project, I have this code that works fine: <v-img class="header__logo" lazy-src="@/ ...

htmlvue.jsvuejs2vue-componentvuetify.js

Leveraging jQuery to extract the value from a concealed form field

Seeking assistance with a jQuery issue... I am attempting to use jQuery to retrieve the values of hidden fields in a form. The problem I am facing is that there are multiple forms displayed on the same page (result set items for updating), and the jQuery ...

javascriptjqueryhtml

Obtain the information sent by the Jquery ajax call

Below is the code snippet in question: $.ajax({ type: 'GET', data: { s: sToSearch }, url: 'http://localhost:9809/handlers/search.ashx', }).done(function (d) { sCache[sToSearch.toLowerCase()] = d; showResult(d); }); ...

jqueryhtmlasp.netajax

Effective ways to position images within a card alongside a changing title

I have a requirement for displaying multiple cards with dynamic titles fetched from the backend. The challenge is to align images in a row regardless of the title length, ensuring alignment based on the longest title. Below is an illustration of what I am ...

javascripthtmlcsssass

Is it wise to use the<sup>attribute for mandatory form fields?

Would it be wise to utilize the <sup> tag instead of using margin-top: -xnumberofpx for indicating required fields in a form? <label for="address1" required>Address line 1<sup><img src="/src/images/requiredAsterix.png" width="10" heig ...

csshtmlaccessibility

Constantly centered div

I'm dealing with a situation like this: .center_position_div{ width:100%; background-color:green; display: flex; flex-wrap: wrap; } .show_running_exam { width: 22%; background-color:aliceblue; margin-left: 1%; margi ...

htmlcss

I am still receiving an empty dropdown value despite implementing ng-selected

I am having issues with using ng-selected to retrieve the selected value from a dropdown. Instead of displaying the selected value, it appears blank. Here is the code snippet I have tried: <div> <select id="user_org" ng-model="selectedorg.all ...

javascripthtmlangularjs

Center the middle item in a flexbox column arrangement

I'm working on a layout where I have three items stacked vertically within a column. My goal is to center the middle item (green) in the column and have the other items positioned around it. Here's my current setup: .flex-row { display: fl ...

htmlcssflexbox

Find the div element that wraps around the currently selected radio button

Take a look at this code snippet: <div class="paymentOption"> <input type="radio" name="paymentOption" value="1" /> <span class="marginLeft10">1-time payment using a different credit card</span> </div> Is it feasible ...

csscss-selectors

jQuery function fails to work on a list that has been dynamically generated

Can someone please assist me? I have encountered an issue where the dynamic list on the second page is not functioning properly. When I click any "li" element to trigger an alert for the respective "id" (which works fine for a hardcoded list), nothing happ ...

jqueryhtmljquery-mobile

Is the appearance of the Select Box altered when using Opera browser?

Here is the outcome I am hoping for. It displays correctly in Chrome, IE and FF: However, this is what I see when using Opera: Check out the demo site: Can anyone offer assistance? ...

htmlcsscross-browseropera

importing a text file into the appropriate input field on an HTML form

I've been experimenting with this JavaScript code and I can't seem to get it to work as intended. The code is designed to save the value of a single textbox into a text file that can later be loaded back into the same textbox. However, I'm f ...

javascripthtmltextboxsave

There seems to be an issue with the item display page when clicking on the 'view details' button within the Bootstrap tab

Encountering a problem with displaying the product details page. There are four bootstrap tabs, each containing some Product Items with a Quick View link button. The issue arises when clicking on the link button, as all tab items with the same ID are displ ...

htmlasp.net-corerazor-pages