CSS: 如何使 div 元素可调整大小

Question

假设我有一个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>

我该怎么做？

- heroxav

---

你尝试过使用 overflow: auto; resize: both; 吗？这应该可以解决问题，但在使用 flexbox 模型的元素上可能会有些奇怪的表现。 - Hidden Hobbes

@HiddenHobbes 这就是它的样子：Fiddle - heroxav

Answer 1

查看这个 Plunkr

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

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

- Sharmila

---

谢谢你的回答！关于你的解决方案，我有几个问题：请看这个 Fiddle。另外，它说 Uncaught TypeError: $(...).resizable is not a function，尽管它在技术上是有效的。 - heroxav

Answer 2

你应该遵循这段代码

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

- Sawan mishra

---

看一下这个Fiddle。我猜测是flexbox布局导致了这个结果。 - heroxav