Изменение размера боковой панели - перетащите, чтобы изменить размер

Question

Я пытаюсь создать макет, который позволяет изменить размер боковой панели, перетаскивая ее за край. Такое поведение можно увидеть в CodePen / CodeSandbox и т. Д. c .. - вы можете перетащить каждое «окно кода», чтобы изменить его размер. Я ищу то же поведение, но с макетом страницы.

То, что я придумала, позволяет перетащить, чтобы изменить размер, но если есть много контента в пределах «основной» области (области, которая не является боковой панелью), которая отбрасывает перетаскивание.

Я хочу иметь возможность перетаскивать до самого края экрана, независимо от содержание внутри.

Я думаю, что лучший способ показать эту проблему - это демо:

Оригинал демо:

const resizer = document.querySelector("#resizer");
const sidebar = document.querySelector("#sidebar");

resizer.addEventListener("mousedown", (event) => {
  document.addEventListener("mousemove", resize, false);
  document.addEventListener("mouseup", () => {
    document.removeEventListener("mousemove", resize, false);
  }, false);
});

function resize(e) {
  const size = `${e.x}px`;
  sidebar.style.width = size;
}

/** 
 * Helpers 
 */

sidebar.style.width = '325px';
const mainContent = document.querySelector("#main-content");

function addContent() {
  const mainContentStr = [...Array(10).keys()].map(i => "Main Content");
  mainContent.innerHTML += mainContentStr.join(' ') + '<br /><br /><h1>Now drag to see how difficult it is, remove content to see how easy it is</h1>';
}

function removeContent() {
  mainContent.innerHTML = '';
}

document.querySelector("#add-content")
  .addEventListener('click', () => addContent())

document.querySelector("#remove-content")
  .addEventListener('click', () => removeContent())

body {
  position: relative;
  height: auto;
  min-height: 100vh;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  overflow: hidden;
  margin: 0;
}

#wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#sidebar {
  height: 100%;
  position: relative;
  margin 0;
  padding: 0;
  box-sizing: border-box;
  background: lightgray;
  border: 2px solid darkgray;
}

#resizer {
  position: relative;
  z-index: 2;
  width: 18px;
  cursor: col-resize;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  background: #333642;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#main {
  background: lightblue;
  height: 100%;
  flex-grow: 1;
  flex-direction: row;
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
}

#add-content {
  width: 80px;
  float: right;
  background-color: forestgreen;
}

#remove-content {
  width: 80px;
  float: right;
  background-color: salmon;
}

<div id="wrapper">
  <div id="container">
    <div id="sidebar">
      <p>Sidebar content</p>
      <button id="add-content">Add Content</button>
      <button id="remove-content">Remove Content</button>
    </div>
    <div id="resizer"></div>
    <div id="main">
      <p id="main-content"></p>
    </div>
  </div>
</div>

---

Обновленная демоверсия:

После добавления кнопки, они выглядят растянутыми по вертикали 100%

const resizer = document.querySelector("#resizer");
const sidebar = document.querySelector("#sidebar");

resizer.addEventListener("mousedown", (event) => {
  document.addEventListener("mousemove", resize, false);
  document.addEventListener("mouseup", () => {
    document.removeEventListener("mousemove", resize, false);
  }, false);
});

function resize(e) {
  const size = `${e.x}px`;
  sidebar.style.flexBasis = size;
}

/** 
 * Helpers 
 */

sidebar.style.flexBasis = '325px';
const mainContent = document.querySelector("#main-content");

function addContent() {
  const mainContentStr = [...Array(10).keys()].map(i => "Main Content");
  mainContent.innerHTML += mainContentStr.join(' ') + '<br /><br /><h1>Now drag to see how difficult it is, remove content to see how easy it is</h1>';
}

function removeContent() {
  mainContent.innerHTML = '';
}

document.querySelector("#add-content")
  .addEventListener('click', () => addContent())

document.querySelector("#remove-content")
  .addEventListener('click', () => removeContent())

body {
  position: relative;
  height: auto;
  min-height: 100vh;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  overflow: hidden;
  margin: 0;
}

#wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#sidebar {
  height: 100%;
  position: relative;
  margin 0;
  padding: 0;
  box-sizing: border-box;
  background: lightgray;
  border: 2px solid darkgray;
  
  min-width: 0;
}

#resizer {
  flex-basis: 18px;

  position: relative;
  z-index: 2;
  cursor: col-resize;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  background: #333642;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#main {
  flex-basis: 0;
  flex-grow: 1;
  min-width: 0;

  background: lightblue;
  height: 100%;
  flex-direction: row;
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
}

#add-content {
  width: 80px;
  float: right;
  background-color: forestgreen;
}

#remove-content {
  width: 80px;
  float: right;
  background-color: salmon;
}

<div id="wrapper">
  <div id="container">
    <div id="sidebar">
      <p>Sidebar content</p>
    </div>
    <div id="resizer"></div>
    <div id="main">
      <button id="add-content">Add Content</button>
      <button id="remove-content">Remove Content</button>
      <p id="main-content"></p>
    </div>
  </div>
</div>

Answer 1

Чтобы установить фиксированную неизменную ширину во Flexbox, используйте flex-basis вместо width. Исходя из этого фиксированного размера, гибкий элемент может затем уменьшаться или увеличиваться в зависимости от доступного пространства и свойств flex-grow и flex-shrink.

Кроме того, значение по умолчанию min-width гибкого элемента равно auto. Это означает, что элемент не может иметь ширину, меньшую, чем размер его содержимого, даже если для flex-basis установлено значение 0px. Это означает, что мы должны переопределить значение min-width по умолчанию на 0px, чтобы при перетаскивании элемента #resizer он мог полностью сжаться.

Вот рабочий пример. Я просто настроил ваше свойство width на flex-basis в JS и CSS. И затем я также добавил min-width свойство 0px к #main и #sidebar.

const resizer = document.querySelector("#resizer");
const sidebar = document.querySelector("#sidebar");

resizer.addEventListener("mousedown", (event) => {
  document.addEventListener("mousemove", resize, false);
  document.addEventListener("mouseup", () => {
    document.removeEventListener("mousemove", resize, false);
  }, false);
});

function resize(e) {
  const size = `${e.x}px`;
  sidebar.style.flexBasis = size;
}

/** 
 * Helpers 
 */

sidebar.style.flexBasis = '325px';
const mainContent = document.querySelector("#main-content");

function addContent() {
  const mainContentStr = [...Array(10).keys()].map(i => "Main Content");
  mainContent.innerHTML += mainContentStr.join(' ') + '<br /><br /><h1>Now drag to see how difficult it is, remove content to see how easy it is</h1>';
}

function removeContent() {
  mainContent.innerHTML = '';
}

document.querySelector("#add-content")
  .addEventListener('click', () => addContent())

document.querySelector("#remove-content")
  .addEventListener('click', () => removeContent())

body {
  position: relative;
  height: auto;
  min-height: 100vh;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  overflow: hidden;
  margin: 0;
}

#wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#sidebar {
  height: 100%;
  position: relative;
  margin 0;
  padding: 0;
  box-sizing: border-box;
  background: lightgray;
  border: 2px solid darkgray;
  
  min-width: 0;
}

#resizer {
  flex-basis: 18px;

  position: relative;
  z-index: 2;
  cursor: col-resize;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  background: #333642;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#main {
  flex-basis: 0;
  flex-grow: 1;
  min-width: 0;

  background: lightblue;
  height: 100%;
  flex-direction: row;
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
}

#add-content {
  width: 80px;
  float: right;
  background-color: forestgreen;
}

#remove-content {
  width: 80px;
  float: right;
  background-color: salmon;
}

<div id="wrapper">
  <div id="container">
    <div id="sidebar">
      <p>Sidebar content</p>
      <button id="add-content">Add Content</button>
      <button id="remove-content">Remove Content</button>
    </div>
    <div id="resizer"></div>
    <div id="main">
      <p id="main-content"></p>
    </div>
  </div>
</div>