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

Verify that the web element has a class containing the pseudo selector (:first-child) applied using Selenium WebDriver

Whenever I have a css style that uses the pseudo selector first-child: .point:first-child { margin-left: 0; } Could one find out if a specific DOM element has the class point with the :first-child pseudo-selector applied? .getAttribute("class") isn&a ...

cssselenium

When developing a website with HTML/CSS, is it recommended to utilize tables for organizing content

Seeking guidance as a novice in web development. I am planning to design a table with input fields that will be sent to the server upon submission. What is the preferred method for achieving this? Is it advisable to utilize html-tables or would it be more ...

htmlcsshtml-table

Ways to prevent a <a href> element with a class linked to javascript from behaving like a block element

I am currently facing an issue with formatting an inline navigation. The last link, which is associated with a JavaScript class, is causing the entire link to become a block element instead of aligning inline with the rest of the links in the navigation. ...

javascripthtmlcss

Implement the Bootstrap datetimepicker functionality for the specified div element

The date picker successfully functions when I assign the id to the input tag as shown below: <div class="col-sm-4" id="datepicker"> <input type="text" class="form-control" id="inputDate" placeholder="Date"> <span class="glyphicon gl ...

javascriptjqueryhtmlcsstwitter-bootstrap

Adjust the placement of a div within another div based on various screen sizes dynamically

Currently, I am working on an Ionic 2 app where the user is required to select specific points on the screen. These coordinates will then be utilized on another screen with a different size. My initial attempt at using rule of three/cross multiplication pr ...

javascripthtmlcssangularionic2

How to convey emotions through Material UI MenuProps to customize paper root classes

Utilizing Material UI for a Select menu along with Emotion for custom styling. I am facing a challenge where I need to customize the root classes (MuiPaper-root or MuiMenu-paper) of the menu popover once a menu item inside the Select menu is clicked. Inc ...

cssreactjsmaterial-uiemotion

Guide on darkening the surrounding div of an alert to give it a modal-like effect

I want to display an alert to the user in a visually appealing way. To achieve this, I am utilizing Bootstrap's alert class. Here is how I am showing the user a div: <div class="alert alert-warning alert-dismissible" role="alert"> Some text ...

javascriptjqueryhtmlcsstwitter-bootstrap

Placing a list item at the beginning of an unordered list in EJS with MongoDB and Node.js using Express

What I've done: I already have knowledge on how to add an LI to UL, but it always goes to the bottom. What I'm trying to achieve: Add an LI to the top so that when my div.todos-wrapper (which has y-oveflow: hidden) hides overflow, the todos you a ...

javascriptcssnode.jsmongodbejs

CSS animation for input range slider

Is there a way to create smoother animations for the input[type="range"] element, especially when dealing with short audio files? You can check out my Codepen where I've been experimenting with solutions using a short audio file: Codepen Link I am s ...

csshtmlcss-animations

Angular Placeholder Positioned at the Top

Hello, I am a beginner in Angular and need to create an input field that looks like this: Everything is going fine except for the Vorname placeholder at the top. How can I place it there? Currently, I am utilizing Angular Materials. <div class='g ...

htmlcssangular

Updating the color of text when clicking on a link using javascript

I am facing an issue where I cannot seem to change the text color using JavaScript. The functionality to show and hide div tags is working perfectly, but changing the color seems to be a challenge. It's worth noting that there are no styles defined fo ...

javascriptcssfunctiononclicktextcolor

The custom styling in custom.css is not taking precedence over the styles defined in

My site is experiencing some element overwriting when I include css/bootstrap.min.css, such as 'a' tags, the .nav bar, and fonts used on the site. Load order: <link href="css/bootstrap.min.css" rel="stylesheet"/> <link rel="styleshe ...

htmlcssbootstrap-4

Guide to setting a background image on a div when hovering using jQuery

I'm having trouble adding a background image to this specific div element: <div class="logo-main"></div> Here is the script I've been using, but it doesn't seem to be working as expected: <script type='text/javascript& ...

jquerycssbackgroundhover

Error: Validation issues detected in field functionality

My goal is to loop through a set of text fields and check if the user has input any values. However, I'm facing an issue where even though I have provided values in the text fields, it seems like they are empty. To better illustrate my problem, I have ...

javascriptjqueryhtmlcss

Tips for utilizing an array within React and transforming it into a component

I've developed a website that pulls data from a SQL database I created, containing details such as name, address, and occupation of individuals. I successfully managed to showcase this information on the webpage by structuring an array and inserting t ...

javascriptcssreactjs

Position the title of the Bootstrap selectpicker field to the right

I utilized Creative Tim's Material Dashboard Pro to create a select field. My goal is to align both the select field and its options to the right. Currently, I have only been successful in aligning the options while the title and selected option rema ...

cssselectbootstrap-4right-to-left

my divs are not being affected by the max-width property and are retaining their

I've been learning CSS and HTML through an interesting tutorial on Udacity. Here's the code I've been working on: .image{ max-width: 50%; } .app{ display: flex; } .description{ color: red; max-width: 705px; } <h1 class="title" ...

htmlcssflexbox

css problem with scaling in firefox

My goal is to create a website that adjusts its size based on the document size. When the document size is between 0px and 1024px, I want the design to be responsive. This can easily be achieved with CSS media queries. Similarly, when the document size is ...

javascriptjquerycsstransform

Tips for changing the style ID depending on the variable value

Currently, I am exploring the possibility of switching CSS styles using jQuery through a simple if condition. Is there an easy method to switch styles based on IDs? In my case, I have two CSS blocks each with different IDs. Here is an example: <style ...

jquerycss

Is it possible to customize bootstrap classes for a unique bootstrap css design?

In my MVC4 project, I faced a situation where I had a global.css class with some classes that conflicted with Bootstrap after adding it. To resolve this, I created a new file called bootstrap_migration.css. In this file, I prefixed the Bootstrap classes wi ...

htmlcssasp.net-mvc-4twitter-bootstrap