Conteneur redimensionnable avec un élément contenu qui déborde. Combiner overflow: visible redimensionnabilité

Question

Je dois créer un conteneur div avec un bouton à bascule -up tiré (mais cela pourrait être aussi une portée simple, une étiquette ou tout le reste), mais qui peut aussi être redimensionnable.

Malheureusement (https://css-tricks.com/almanac/properties/r/resize/):

super important de savoir: Redimensionner ne fait rien à moins que la propriété overflow est réglé sur autre chose que visible, ce qui est sa valeur initiale pour la plupart des éléments.

---

J'ai essayé d'écrire un simple example de comparer les limites de chaque propriétés contradictoires (ci-dessous un extrait seulement):

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

Je ne peux pas comprendre comment résoudre ce problème, donc comment avoir un conteneur redimensionnable qui peut montrer un objet débordé (Possiblement avec seulement CSS)?

Answer 1

comment avoir un conteneur redimensionnable qui peut montrer un élément débordés

Pour resize au travail, l'élément besoin d'un débordement autre que visible, de sorte que la réponse à cette question est pas.

---

Je dois créer un conteneur div avec un bouton à bascule tirée vers le haut

Si vous modifiez votre balisage un peu, vous pouvez faire comme ce

Fiddle demo

Extrait de pile

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