css - 可调整大小的容器，其中包含的元素会溢出。合并溢出 :visible with resizability

Question

我需要创建一个带有上拉切换按钮的容器 div(但这也可以是一个简单的跨度、标签或其他任何东西)，但这也可以重新-相当大。

不幸的是( 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>