可调整大小的容器，其中包含的项目会溢出。将 overflow:visible 与可调整大小相结合

Question

我需要创建一个带有 上拉切换按钮 的容器 div（但这也可以是一个简单的跨度、标签或其他任何东西），但这也可以 re-sizable.

不幸的是(https://css-tricks.com/almanac/properties/r/resize/):

Super important to know: resize does nothing unless the overflow property is set to something other than visible, which is its initial value for most elements.

我试图写一个 simple example 来比较每个冲突属性的限制（下面只是一个摘录）：

<div class="container">
  <button>Toggle</button>
  <div class="content">...</div>
</div>

<div class="container overflow-hidden">
  <button>Toggle</button>
  <div class="content">...</div>
</div>

.container {
  border:solid 1px red;
  position:relative;
  resize:horizontal;
}

.overflow-hidden {
  overflow:hidden;
}

button {
  position:absolute;
  top:-20px;
}

我不知道如何解决这个问题，所以如何有一个可以显示溢出项目的可调整大小的容器（可能只有 CSS）？

Answer 1

how to have a resizable container that can show an overflowed item

要使 resize 正常工作，元素需要溢出而不是可见，所以答案是否。

I need to create a container div with a pulled-up toggle button

如果你稍微改变你的标记，你可以这样做

Fiddle demo

堆栈片段

.container {
  position: relative;
  display: inline-block;
}

.overflow-hidden {
  border: solid 1px red;
  width: 50%;
  height: 80%;
  margin-top: 18px;
  resize: horizontal;
  padding: 20px;
  overflow: hidden;
}

button {
  position: absolute;
  top: 0;
  left: 0;
}

.content {
  border: solid 1px blue;
  height: 100px;
}

<div class="container">
  <button>Toggle</button>
  <div class="overflow-hidden">
    <div class="content">
      WITH "overflow:hidden":
      <br> "resize" feature is available <strike>but pulled-up button is obviously semi-hidden</strike>
    </div>
  </div>
</div>

可调整大小的容器，其中包含的项目会溢出。将 overflow:visible 与可调整大小相结合

Resizable container with a contained item that overflow. Combine overflow:visible with resizability

css

resizable