CSS：使 div 可调整大小答案

【问题标题】：CSS: Making div resizableCSS：使 div 可调整大小
【发布时间】：2017-05-09 03:07:02
【问题描述】：

假设我有一个 flex 布局并且想要调整它的大小。

我希望能够通过水平拖动一个 div 的边框来调整其大小。

看看这个Fiddle

HTML

#main {
  display: flex;
  justify-content: space-between;
  height: 100vh;
  .flex {
    width: 100%;
    &:nth-child(2) {
      background: red;
      overflow: auto; resize: horizontal;
    }
  }
}

<div id="main">
  <div class="flex">ABC</div>
  <div class="flex">
    DEF
  </div>
  <div class="flex">GHI</div>
</div>

我该怎么做？

【问题讨论】：

你试过overflow: auto; resize: both;吗？它应该可以工作，但在使用 flexbox 模型的元素上可能会有点奇怪。
@HiddenHobbes 看起来就是这样：Fiddle

标签： html css layout resize flexbox

【解决方案1】：

检查这个 plunkr

https://plnkr.co/edit/sxs6RLXVV6REzQnipfgj?p=preview

$( "#second" ).resizable();

【讨论】：

感谢您的回答！关于您的解决方案，我遇到了一些问题：看看这个Fiddle。它还说Uncaught TypeError: $(...).resizable is not a function，即使它在技术上有效。

【解决方案2】：

您应该遵循此代码

#main {
    display: flex;
    justify-content: space-between;
    height: 100vh;
    .flex {
        width: 100%;
        &:nth-child(2) {
            background: red;
            resize: both;
            overflow: auto;
        }
    }
}

【讨论】：

看看这个Fiddle。我猜是 flexbox 布局导致了这个结果。