Увеличьте / уменьшите ширину div боковой панели flexbox с помощью перетаскивания

Question

У меня есть простой макет из 3 столбцов с левой боковой панелью, областью содержимого и правой боковой панелью.Я использую flexbox для обработки ширины.Я хотел бы сделать так, чтобы, когда пользователь перетаскивал правую границу левой боковой панели, размер div можно было изменить.Я бы предпочел решение css, если оно имеет смысл, но я открыт для javascript или jquery.Какой подход мне проще всего понять:)

Answer 1

Вот возможное решение с использованием свойства css resize (нажмите Run code snippet, чтобы увидеть результат).

Примечания:

• Обработчик изменения размера находится внизуправый угол левой боковой панели
• Свойство resize еще не полностью поддерживается всеми браузерами (~ 74% см. caniuse )
• Стили для обработчика изменения размера по-прежнемуограничено (см. этот вопрос )

.container {
  height: 500px;
  display: flex;
}

.left-sidebar {
  display: flex;
  flex-direction: row;
  background-color: #364F6B;
  color: #fff;
  
  /* This is for resizing */
  overflow: scroll;
  resize: horizontal;
}

.center-aria {
  background-color: #3FC1C9;
  flex-grow: 2;
}

.right-sidebar {
  background-color: #FC5185;
}

.left-sidebar, .right-sidebar, .center-aria {
  padding: 8px;
}

<div class="container">
  <div class="left-sidebar">
    Left Sidebar - Resize me
  </div>
  
  <div class="center-aria">Center Aria</div>
  
  <div class="right-sidebar">Right Sidebar</div>
</div>