Question

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

不幸的是（ https://css-tricks.com/almanac/properties/r/resize/ ）：

非常重要的是：除非将overflow属性设置为除可见之外的其他内容，否则resize不会执行任何操作，这是大多数元素的初始值。

我尝试编写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

如何使用可显示溢出项目的可调整大小的容器

要使resize生效，该元素需要溢出而不是可见，因此答案是否。

我需要使用上拉切换按钮
创建一个容器div

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

Fiddle demo

Stack snippet

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

可调整大小的容器，包含溢出的项目。结合溢出：可见，可调整性

1 个答案: