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

Question

I need to create a container div with a pulled-up toggle button (but this could be also a simple span, a label or everything else), but that can be also re-sizable.

Unfortunately (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.

---

I tried to write a simple example to compare limits of each conflicting properties (below only an extract):

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

I can't figure out how to solve this problem, so how to have a resizable container that can show an overflowed item (Possibly with only CSS)?

Answer 1

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

For resize to work, the element need an overflow other than visible, so the answer to that is no.

---

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

If you alter your markup a little, you can do like this

Fiddle demo

Stack snippet

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