Using the display: flex property on both a parent element and one of its descendants can lead to issues

Hello there!

I've encountered a strange issue in my CSS project for the second time. It seems that when both the ancestor and its child have a display: flex property, it causes errors. I can't quite pinpoint the specific conditions that trigger this bug. Interestingly, I recently discovered another instance of this problem:

1) The layout appears fine on Desktop Chrome: https://youtu.be/e6jIKx7KM7s 2) However, it fails to display correctly on an iPhone: https://youtu.be/0Nw_dHPhYZQ

Typically, this error occurs on iPhones, but occasionally even Desktop Chrome has trouble rendering properly. Check out this link for more details: https://gist.github.com/lbvf50mobile/5dc976a3a451ac491159ea6b5d971482

The first and second instances of "display: flex" were used to create sticky footers with scrolling and holy grail layouts.

However, the third use of "display: flex" was within a swiper-slider, causing issues specifically on Safari and Chrome browsers on the iPhone 6s.

Any thoughts on what might be causing this?

Thank you!

htmlcssflexbox

Answer №1

The issue was resolved by simplifying the code:

Original Code with Errors:

main.pose .center{   
  & a.center{flex: 1 100;} 
  & .text{flex: 100 1;}
}

Updated Error-Free Code:

main.pose .center{   
  & a.center{} 
  & .text{flex: 1;}
}

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

The background color property returns as blank, failing to update on the screen despite my attempt to assign a new value

In my current project, I'm utilizing a library called Colorthief to extract the dominant color of an image. This extracted color is then used to dynamically set the background color of three button elements. Here's how it works: var flag = docume ...

javascripthtmlcss

The spacing within the table's <tr> elements does not get altered

I am struggling to add a small space in the table <tr> but my attempts have not been successful. How can I resolve this issue? Please refer to the image below for clarification: https://i.sstatic.net/HXdhq.png .panel-booking .panel-body { pad ...

htmlcsshtml-table

What is the best way to include a class in the <td> element of a dynamic table?

My goal is to sum up the values in a specific column of a dynamic table by attaching an id property to each row. I am specifically focused on assigning an id to each <td> in every row of the table. UPDATE: Although I have all 4 keys in the <td> ...

javascripthtml

Troublesome issue with Internet Explorer and Safari: The .click() function does not work for input type="button" in Jquery

Is there a way to ensure that the input type="button" functions properly with jquery function .click() in Internet Explorer and Safari? While it works seamlessly in Mozilla, Chrome, and Opera. For instance, when the button is clicked, a hidden div should b ...

javascriptjqueryhtmlsafariexplorer

When using React, the page loads and triggers all onClick events simultaneously, but when clicking on a button, no action is taken

I have a strong foundation in HTML and CSS/SASS but I'm just getting started with React. Recently, I encountered an issue that has me stumped. I am trying to highlight a button on the navigation bar based on the current page the user is on. I attemp ...

javascripthtmlcssreactjsonclick

"Can you share a method to retrieve the source of an audio element from a list using

Is there a way to retrieve the source of an audio tag when clicking on the button that plays it? I have multiple li tags, each containing three elements: An a tag with the track source which will be played. => completed An audio tag similar to the pr ...

javascriptjqueryhtmlaudio

Iterate through the pixels of the canvas to locate the x and y coordinates and position of each white pixel

In my project, I have a canvas with white text drawn on it. To identify the white pixels, I extract the image data and iterate through each pixel using the following code snippet: var pixelData = this.ctx.getImageData(0, 0, this.ctx.canvas.width, this.ctx ...

javascripthtmlmathcanvas

Unexpected vertical line in MUI5 Stepper appears when invoking from a function

Greetings! I'm currently working on developing a MUI5 vertical stepper, but I've encountered an issue when rendering steps from a function. Specifically, there is an extra connector line appearing on top of the first step. If you'd like to ...

cssreactjsmaterial-uiuistepper

Determining the number of columns and rows within an HTML table

Is there a way to determine the number of columns and rows in an HTML file? How can we accurately count the total number of td tags present within the HTML file? ...

c#.nethtmlwinformscount

Troubleshooting a position: fixed conflict in CSS or browser caused by a jQuery script

Check out this CodePen example. Go to the tab block by scrolling down. When you scroll to the top, it adds the 'sticked' class, and when it reaches the bottom of the parent element, it gets the 'sticked2' class. The problem arises when ...

jqueryhtmlcss

What is the best way to maintain the formatting of a textarea in the database?

My HTML form includes a text area and a functionality to save the data into a database upon submission. The issue arises when the saved data is retrieved from the database, as the original formatting of the text gets altered. For instance: "This is a text ...

mysqlhtml

Having issues with jQuery Checkbox Selector and .attr('checked) function not functioning correctly?

I'm trying to assign the value of a variable as true or false based on the selected checkbox. However, the code I have is not working as expected. <input type="checkbox" id="chkBox1"> var chkBox1Val = $('#chkBox1').prop('checked ...

javascriptjqueryhtmlcsscheckbox

Combining two HTML tables in PHP: A step-by-step guide

I have two HTML tables that each contain three rows and one column. I am looking to combine them programmatically in order to create a single table with two columns and three rows. Is there a specific function or workaround that can help me achieve this? ...

phphtmlhtml-tablesimple-html-dom

Simple HTML/CSS text blocks positioned beside images in a list format

I'm attempting to design a list (ul) where each li has an img on the left and text aligned to the left (including a title and paragraphs) positioned next to the image on the right. I've experimented with float: left and various display propertie ...

htmlcss

Require assistance with debugging an issue in an online game played through a web browser

Experience a simple browser memory game where you must flip all matching cards to emerge victorious. The glitch : In the game, if you click quickly enough, you can uncover more than two cards at a time. I've spent ample time attempting to rectify t ...

javascripthtmlcss

Struggling with the resizing functionality in an HTML template designed to mimic a window interface

I am currently working on a web template that resembles a window, but I am facing an issue with the resizing functionality. The resizer located in the bottom right corner functions perfectly fine, however, when attempting to create a resizer for the top ri ...

javascripthtmlcssfrontend

Sliding Tab Animation using solely CSS on Flexbox

I've been challenged with developing my own React Tabs component that includes a sliding animation, similar to what you see in mui or ant design. I can achieve this using JavaScript, however, the limitation is that I cannot use CSS within JavaScript ...

javascriptcssflexbox

Creating a dropdown link that features an H3 element with Bootstrap 4

Can someone help me with an issue I'm having regarding dropdowns in a navbar? When using a normal nav-link (without a dropdown), I placed the menu text inside an H3 tag, but when I tried to do the same for the dropdown link, the arrow appeared below t ...

cssdrop-down-menubootstrap-4

What steps can I take to address a 500 internal server error when attempting to execute a Python script within a CGI file?

Looking to execute a python script on a Strato-hosted website (.nl) using a CGI file. The setup includes my code: a cgi file, python file, and dependencies file for adding something to the PATH. Check out the files here. Here's what the folders look ...

pythonhtmlflaskcgicgi-bin

State change shows the previous and current values simultaneously

I've been working on updating the values of initUsers on the DOM. The initial state values work fine, but when I try to update initUsers, it displays different values than expected. Essentially, entriesNum receives a number as an event and changes th ...

javascripthtmlcssreactjsjsx