Rendre l'enfant visible en dehors d'un parent overflow:hidden

Question

En CSS, le overflow:hidden est définie sur les conteneurs parents afin de leur permettre de s'étendre avec la hauteur de leurs enfants flottants.

Mais il présente également une autre caractéristique intéressante lorsqu'il est associé à margin: auto ...

Si le frère ou la sœur PRÉCÉDENT(E) est un élément flottant, il ou elle lui sera juxtaposé(e). C'est-à-dire que si le frère ou la sœur est float:left puis le conteneur avec float:none overflow:hidden apparaîtra à droite de son frère, sans nouvelle ligne - comme s'il flottait dans le flux normal. Si le frère ou la sœur précédent(e) est float:right alors le conteneur apparaîtra à la gauche du frère ou de la sœur. Le redimensionnement de ce conteneur le fera apparaître centré entre les éléments flottants. Disons que si vous avez deux éléments frères et sœurs précédents, un float:left l'autre float:right le conteneur apparaîtra centré entre les deux.

Voici donc le problème ...

Comment maintenir ce type de disposition SANS masquer les enfants ?

En cherchant sur le web, je trouve des moyens de clear:both et développer un conteneur... mais je ne trouve pas de solution alternative pour maintenir le centrage gauche/droite des enfants précédents. Si vous faites en sorte que le conteneur overflow:visible le conteneur ignore soudainement le flux de mise en page des éléments flottants et apparaît en couches au-dessus de l'élément flottant.

Alors question :

Je dois avoir le conteneur overflow:hidden pour préserver la mise en page...

comment faire pour que les enfants ne soient pas masqués ? J'ai besoin que l'enfant soit absolument positionné par rapport au parent à l'extérieur du conteneur.

O

Comment puis-je overflow:visible afin que je puisse absolument positionner un enfant par rapport au parent à l'extérieur du conteneur... MAIS préserver le flux d'affichage flottant de l'enfant ?

Answer 1

Vous pouvez utiliser le clearfix pour faire la "préservation de la mise en page" de la même manière overflow: hidden fait.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

ajouter class="clearfix" au parent, et supprimer la classe overflow: hidden;

Answer 2

C'est une vieille question, mais je l'ai rencontrée moi-même.

J'ai des semi-solutions qui fonctionnent de manière situationnelle pour la première question("Enfants visibles dans le parent overflow:hidden")

Si la division parent n'a pas besoin d'être position:relative, il suffit de définir les styles des enfants sur visibility:visible.

Si le div parent doit être position:relative, la seule façon possible que j'ai trouvée pour montrer les enfants était position:fixed. Cela a fonctionné pour moi dans ma situation, heureusement, mais j'imagine que cela ne fonctionnerait pas pour d'autres.

Voici un exemple minable qu'il suffit de poster dans un fichier html pour le visualiser.

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>

Answer 3

Aucune des réponses affichées n'a fonctionné pour moi. Réglage de position: absolute pour l'élément enfant a toutefois fonctionné.

Answer 4

Pour les autres, si clearfix ne résout pas le problème pour vous, ajoutez des marges à la fratrie non flottante qui sont les mêmes que la ou les largeurs de la ou des fratries flottantes.

Answer 5

La réponse de Kunal était correcte mais comporte une erreur de syntaxe et l'éditer ne semble pas fonctionner.

Pour les autres, si cela ne fonctionne pas, essayez de donner de la hauteur en vh dans le composant où vous avez besoin de la barre de défilement.

Note : Cette fonctionnalité CSS est expérimentale, non normalisée et peut ne fonctionner que sur les navigateurs Webkit. Voir https://caniuse.com/css-overflow-overlay

.parent {
     overflow: hidden;
}

.child {
     overflow: overlay;
     height: 100vh;
}