Есть ли альтернативный метод CSS, который я могу использовать для обхода неполной поддержки Safari для flex-grow?

Question

Я делаю виджет "аккордеон", который может содержать любое количество дочерних элементов. Когда дочерний элемент закрыт, он сжимается до высоты его заголовка. Когда он открыт, он распределяет свою высоту так же, как и другие открытые братья и сестры вокруг него. Я уверен, что вы уже видели подобные вещи - нажмите кодовое поле ниже, если это не имеет смысла.

Это казалось хорошим кандидатом на flexbox (хотя я не эксперт). Я придумал это, которое использует flex-grow и работает точно так, как я хочу в Firefox и Chrome, но не в Safari. Похоже, что Safari не расширяет дочерние элементы, если вертикальное пространство уже занято, поэтому после открытия одного элемента вы не можете легко открыть второй.

<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
    // this is the closed height
    flex-basis: 20px
    flex-grow: 0
    transition: flex-grow .3s ease-out
    &.open
      flex-grow: 1

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

Кто-нибудь знает, как я могу обойти это или альтернативное свойство CSS, которое я могу изменить для достижения того же результата?

Чтобы было ясно, я ищу (идеально элегантное, но не обязательное) решение CSS здесь. Я не хочу вычислять высоту в JS, так как в остальной части кода это будет ужасно.

Спасибо за прочтение!

Answer 1

Вы должны использовать префикс -webkit

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

Вот хорошее описание для flex. https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

Из вашего кодепа

// the main workings
.wrapper
  display: flex
  display: -webkit-flex
  flex-direction: column
  -webkit-flex-direction: column
  .item
    // this is the closed height
    flex-basis: 20px
    -webkit-flex-basis: 20px
    flex-grow: 0
    // safari specific
    -webkit-flex-grow: 0
    transition: flex-grow .3s ease-out
    &.open
      flex-grow: 1
      -webkit-flex-grow: 1

// boring stuff for display etc
.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