Ответы пользователя по тегу CSS
  • Как сделать, чтобы высота одной колонки зависила от второй?

    @LAVladis
    Возможно так
    <div style="display: flex;">
      <div id="left" style="flex: 1; background-color: red; overflow: auto;">
        1<br>
        2<br>
        3<br>
        4<br>
        5<br>
        6<br>
        7<br>
        8<br>
      </div>
      <div id="right" style="flex: 1; background-color: blue;">
        1<br>
        2<br>
        3<br>
      </div>
    </div>
    Ответ написан
  • Если указать высоту контента аккордеона auto, то перестает работать transition. Почему?

    @LAVladis
    Проблема связана с тем, как браузеры обрабатывают анимацию перехода, вашем случае transition и значения height: auto.

    Когда используешь transition для свойства height и изменяете его значение с фиксированного на auto, браузеру сложно анимировать это изменение. При переходе от фиксированного значения браузер не может плавно интерполировать все промежуточные значения, так как auto зависит от содержимого контейнера и его размера.
    Поэтому, когда вы используете auto для height, переход может стать не плавным или даже отсутствовать, что в вашем случае, так как браузер не может анимировать изменение значения auto на определенное числовое значение.

    Можете попробовать вместо использования height: auto использовать максимальное значение высоты, которое может достигнуть панель (например в 120пх как у вас и написано в ксс) и управлять отображением содержимого внутри с помощью других ксс, таких как visibility и opacity, чтобы добиться плавной анимации.

    Мб попробовать сделать так:

    .accordion_wrapper {
      .accordion {
        display: flex;
        flex-direction: column;
        width: 300px;
        border: 2px solid #000;
        overflow: hidden;
    
        &_btn {
          border: none;
          cursor: pointer;
          background-color: #cbcaf9;
          height: 30px;
        }
    
        &_panel {
          transition: .5s height, .5s visibility, .5s opacity;
          height: 0px;
          visibility: hidden;
          opacity: 0;
        }
    
        .active {
          height: 120px;
          visibility: visible;
          opacity: 1;
        }
      }
    }


    С использованием свойств visibility и opacity, вы сможете достичь плавной анимации даже при переключении между значениями высоты 0 и 120пх.
    Ответ написан