javascript - 如何防止 flex 容器溢出/下溢？

Question

我有一个可以通过拖动调整大小的 flexbox 容器。如何防止容器溢出(变得太小并开始隐藏某些元素)或溢出(变得太大并显示空白)？

在下面的示例中，容器应在所有元素达到 18px 高度时停止收缩(最后一个除外)，并在所有元素达到其最大高度时停止扩展(不应出现空格) .

const resizable = document.querySelector('.flex');
let startHeight = NaN;
let startY = NaN;

resizable.addEventListener('mousedown', e => {
  startHeight = resizable.getBoundingClientRect().height;
  startY = e.pageY;
});

window.addEventListener('mousemove', e => {
  if (isNaN(startY) || isNaN(startHeight)) {
    return;
  }
  
  resizable.style.height = (startHeight + e.pageY - startY) + 'px';
});

window.addEventListener('mouseup', () => {
  startHeight = startY = NaN;
});

.flex {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid black;
  cursor: ns-resize;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.item-1 {
  background: red;
  height: 40px;
  max-height: 60px;
  flex: 1;
}

.item-2 {
  background: blue;
  flex: none;
}

.item-3 {
  background: green;
  height: 50px;
  max-height: 50px;
  flex: 1;
}

.item-4 {
  background: yellow;
  height: 30px;
  flex: none;
}

<div class="flex">
  <div class="item-1">
    Item 1
  </div>
  <div class="item-2">
    Item 2
  </div>
  <div class="item-3">
    Item 3
  </div>
  <div class="item-4">
    Item 4
  </div>
</div>

首选纯 CSS 解决方案。该解决方案应该允许缩小容器，使所有元素都处于最小尺寸，并扩展容器，使所有元素都占据最大尺寸。 在容器的 CSS 中硬编码最小和最大高度是 Not Acceptable 。我正在寻找一个通用的解决方案。

Answer 1

我不认为纯 CSS 解决方案在这里可行，因为您完全使用 JavaScript 设置高度。

您可以像我在下面的代码片段中所做的那样添加一个守卫。您还可以在可调整大小为零和很大时计算底部高度，并基于此引入边界(可能性能更好但 dom 更改不好)

const resizable = document.querySelector('.flex');
const lastChild = resizable.querySelector(':last-child');
const resizableBorderBottom = 1;  // hardcoded - could be computed too
let startHeight = NaN;
let startY = NaN;

resizable.addEventListener('mousedown', e => {
  /* 
   * here we assume that the bottom of the last child
   * is the same as the bottom of the resizable for simplicity
   */
  startHeight = resizable.getBoundingClientRect().height;
  startY = e.pageY;
});

window.addEventListener('mousemove', e => {
  if (isNaN(startY) || isNaN(startHeight)) {
    return;
  }
  const lastHeight = resizable.style.height;
  resizable.style.height = ((startHeight + e.pageY - startY) | 0) + 'px';
  const lastChildBottom = lastChild.getBoundingClientRect().bottom | 0;
  const resizableBottom = (resizable.getBoundingClientRect().bottom | 0) - resizableBorderBottom;
  // check if we need to revert the change
  if (lastChildBottom !== resizableBottom) {
    resizable.style.height = lastHeight;
  }
});

window.addEventListener('mouseup', () => {
  startHeight = startY = NaN;
});

.flex {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid black;
  cursor: ns-resize;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.item-1 {
  background: red;
  height: 40px;
  max-height: 60px;
  flex: 1;
}

.item-2 {
  background: blue;
  flex: none;
}

.item-3 {
  background: green;
  height: 50px;
  max-height: 50px;
  flex: 1;
}

.item-4 {
  background: yellow;
  height: 30px;
  flex: none;
}

<div class="flex">
  <div class="item-1">
    Item 1
  </div>
  <div class="item-2">
    Item 2
  </div>
  <div class="item-3">
    Item 3
  </div>
  <div class="item-4">
    Item 4
  </div>
</div>