Are there any other CSS methods available to address the limited support for flex-grow in Safari?

I'm currently developing an interactive "accordion" component that can accommodate multiple child elements. Each child item closes to the height of its header, but expands evenly with other open siblings when activated. If this explanation is unclear, feel free to click on the provided CodePen link for reference.

Utilizing flexbox seemed like a suitable approach for this project, and I managed to create a design using flex-grow that functions perfectly in Firefox and Chrome. However, Safari presents an issue where expanding one item prevents effortless expansion of another due to limited vertical space allocation.

<div class="wrapper">
  <div class="item">
    <h3>foo</h3>
    <p>Lorem ipsum</p>
  </div>
  <div class="item">
    <h3>foo</h3>
    <p>Lorem ipsum</p>
  </div>
  <div class="item">
    <h3>foo</h3>
    <p>Lorem ipsum</p>
  </div>
  <div class="item">
    <h3>foo</h3>
    <p>Lorem ipsum</p>
  </div>
</div>

.wrapper
  display: flex
  flex-direction: column
  .item
    // default closed height
    flex-basis: 20px
    flex-grow: 0
    transition: flex-grow .3s ease-out
    &.open
      flex-grow: 1

https://codepen.io/suchesuch/pen/EEazdV

If anyone has suggestions on how to address this Safari compatibility issue or knows of an alternative CSS property to achieve the desired outcome, I would greatly appreciate your input.

Just to clarify, I am specifically seeking a CSS solution, preferably elegant yet functional, without resorting to JavaScript calculations to maintain code cleanliness. Thank you for taking the time to review my query!

cssflexboxcss-grid

Answer №1

You must include the -webkit prefix in your code

.flex-item {
  -webkit-flex-grow: ; /* Safari */
  flex-grow:         ;
}

Check out this helpful guide for understanding flex properties: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex-grow

This snippet is from your Codepen project:

// Main styles
.wrapper
  display: flex
  display: -webkit-flex
  flex-direction: column
  -webkit-flex-direction: column

.item
    // Fixed height when closed
    flex-basis: 20px
    -webkit-flex-basis: 20px
    flex-grow: 0
    // Specific to Safari
    -webkit-flex-grow: 0
    transition: flex-grow .3s ease-out

&.open
  flex-grow: 1
  -webkit-flex-grow: 1

// Styling details and layout
.wrapper
  height: 300px
  width: 100px
  border: 1px solid black

.item
  position: relative

h3
  height: 20px
  padding: 0
  margin: 0
  background: lightgreen
  cursor: pointer

&.open h3
  background: lightblue

p
  position: absolute
  top: 20px
  left: 0
  right: 0
  bottom: 0
  background: yellow
  margin: 0
  padding: 0
  overflow: hidden

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 hover effect flickers in Firefox, but remains stable in Google Chrome

Here is an example link to check out: I am facing a dilemma on how to solve this issue and unsure if it is related to jQuery or the DOM structure. If you have any suggestions, they would be greatly appreciated. Thank you! ...

jquerycsshtml

Picture appears to be off-center

I created a loginPage.php file with the following content: <?php //some php stuff ?> <!DOCTYPE html> <html> <head> <title>Login Form Design</title> <link rel="stylesheet" type="text/css" href="stylelogin.c ...

phphtmlcss

Switch up between two distinct colors every three elements using a single selector

I have a group of tr items in my list and I want to apply CSS styles to them in a specific pattern : red red red black black black red red red black and so on. Is there a way to achieve this using just one selector? Currently, I'm doing it like th ...

csscss-selectors

When the nav-element is clicked, it will load the new content/file.php into the div with the id of "include."

Seeking the most efficient method to load content from a php file into a designated div on my webpage, prioritizing speed, minimal performance requirements, and ease of implementation. Unsure whether it's preferable to utilize php or javascript for t ...

javascriptphpjqueryhtmlcss

Tips on keeping the size of a react-bootstrap modal constant and enabling scrolling instead of expanding

<Modal size="lg" scrollable show={showInvModal} onHide={handleCloseInvModal}> <Modal.Header closeButton> <Modal.Title>Check out our latest items!</Modal.Title> </Modal ...

cssreactjsbootstrap-4bootstrap-5

Utilizing the power of Scoped CSS with Bootstrap/Bootstrap-Vue Integration

I'm currently working on a chrome extension and utilizing Bootstrap-Vue in my Vue files. I have imported bootstrap/bootstrap-vue into my js file, but the styling is being applied globally. Is there a way to scope the Bootstrap only onto specific inser ...

cssvue.jsgoogle-chrome-extensionbootstrap-4bootstrap-vue

How come my image is not aligned to the right of the header in my HTML code?

My attempt to align an image to the right side of my heading using code was unsuccessful. Here is the HTML snippet I used: /* Aligning with CSS */ #colorlib-logo img { display: flex; align-items: center; width: 30px; height: 30px; } #colorli ...

htmlcsshorizontal-alignment

Vertical stability bar

I need help creating a vertically fixed navigation bar for my website. Currently, I am using a method that has been discussed in various posts: HTML: <html> <head> src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">< ...

javascripthtmlcss

Overflow scrollbars do not appear on flex divs

I am struggling with implementing a simple flex container that contains standard divs. The issue I am facing is that the overflow does not display a vertical scroller as desired. In order to achieve this, I have included the following CSS code snippet: #c ...

htmlcssflexbox

JavaScript utilizing an API to retrieve specific data values

Below is some API Data that I have: [ { "symbol": "AAPL", "name": "Apple Inc.", "price": 144.98, "changesPercentage": -1.22, "change": -1.79, ...

javascripthtmlcssajaxapi

Struggling to add a border to an HTML div element

I'm completely baffled as to why I can't seem to add a border around my div. Here is the link to my jsfiddle: http://jsfiddle.net/4HnKs/1/ It's possible that I've been staring at my computer screen for too long, but no matter how hard ...

csshtmlborder

Having trouble with the Ng multiselect dropdown displaying empty options?

I'm currently facing a challenge in adding a multiselect dropdown feature to my project. Below is the code I have been working on: HTML <ng-multiselect-dropdown [settings]="searchSettings" [data]="dummyList" multiple> </n ...

javascripthtmlcssangulartypescript

What causes the position: sticky; property to fail in React implementations?

Currently, I am facing a challenge in making two sidebars sticky so that they will follow as the user scrolls until they reach the bottom of the page. In my current editing project, this implementation seems to be more complex compared to other programs w ...

cssreactjs

The background image will expand to fill any available space

I'm currently working on rendering divs with a background image CSS property. The images have fixed sizes, and I want to display them in a grid layout. However, the divs with background images stretch when there is extra space available, which is not ...

htmlcss

Change the color of the div's background

My grid created using bootstrap 3 divs consists of a button, followed by a radio button, and then another button. I want to highlight these elements with a consistent background color that stretches across like a single row. Check out my attempt on this f ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Maintaining Aspect Ratio and Adding Letterboxes with Next.js Image

In my Next.js app, there is a section dedicated to displaying selected photos from a gallery. It's crucial for this area to maintain a fixed size of 566px*425px as users navigate through images or when a photo is loading. While the layout is responsiv ...

cssnext.js

Position the text on the left side while also centering it within my div

I am attempting to center align some links within my div, while also ensuring that the text of the links is aligned to the left. However, I have been unsuccessful in achieving this. I can either align them to the left or center, but not both simultaneousl ...

htmlcssalignment

Notifications for AngularJS tabs

I need help finding a method to incorporate "tab notification" using AngularJS, in order to show that there are important alerts that require attention. For example: (1) (3) TAB_ONE TAB_TWO TAB_THREE Could you provide any recom ...

javascripthtmlcssangularjs

At a specific media query breakpoint, links are disabled while the rest continue to function without any

Today I encountered a puzzling issue on my website with a responsive layout that utilizes @media queries and breakpoints. At one specific breakpoint (or resolution, as I am still learning the terminology), the links in the navigation bar are inexplicably d ...

htmlcssresponsive-designmedia-queries

Can someone please explain how I can implement a multi-submenu feature using JavaScript?

HTML CODES: <header> <nav> <ul> <li class="asmenu"><a href="#">Menu1 <i class="fa fa-caret-down"></i></a> <ul class="submenu deact ...

javascripthtmlcsstogglesubmenu