Ne peut pas faire défiler vers le haut avec modal et superposition avec affichage flex

J'ai un modal avec une superposition de toile de fond, voici mon exemple:Ne peut pas faire défiler vers le haut avec modal et superposition avec affichage flex

https://codepen.io/tyrellrummage/full/XeRQYm/

(faire la petite fenêtre pour voir le haut et le bas débordement).

Fondamentalement, la structure est:

<div class="overlay"> 
    <div class="modal"> 
     //content 
    </div> 
</div>

et le style actuel:

.overlay{ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow-y: scroll; 
} 

.modal{ 
    margin: 4rem 0; 
}

cela fonctionne pour la partie inférieure du modal, mais la partie supérieure se garni (découper). Comment puis-je résoudre ce problème uniquement avec CSS?

Source

2017-09-28 nick

Vous devez ajouter '.overlay {padding : 4rem 0; overflow-y: automatique; box-sizing: border-box;} .modal {margin: auto 0;} 'sur votre CSS pour appliquer la solution de Michael_B ([stylo ici] (https://codepen.io/ anon/pen/aLWeKZ).). Une autre option consiste à vérifier si la hauteur de '.modal' est plus petite que celle de' .overlay' et à ajuster la propriété 'align-items':' if (document.querySelector ('. Overlay'). ClientHeight .modal'). clientHeight) {document.querySelector ('. overlay'). style = 'align-items: flex-start;';} '@Michael_B: ce n'est pas un *** exact ** * dupliquer. À votre santé! –

Merci en fait, j'ai utilisé 'align-items: flex-start' et cela a fonctionné. Si tu veux, réponds-y et je marquerai comme correct. – nick

Les questions en double ne peuvent pas être répondues. Mais c'est bon, ne t'inquiète pas. Michael a, en principe, raison. Votre question *** est *** un doublon. La raison pour laquelle j'ai dit que ce n'est pas un doublon ** exact ** est parce que vous devez également savoir appliquer 'box-sizing: border-box' à' .overflow', ce qui nécessite un niveau décent de connaissances CSS. En termes d'être utile aux futurs visiteurs, votre question est à la limite entre être un doublon et mériter sa propre réponse. C'est discutable. –

Une explication très complète de la cause de cette erreur peut être lue in this awesome answer.

Appliqué à votre cas, vous avez besoin des marges top et bottom de .modal réglées sur auto.

Cela signifie que vous devez placer les marges 4rem en tant que padding s de .overlay.

Ce qui, à son tour, signifie que vous devez également appliquer box-sizing:border-box à elle, de sorte que les rembourrages sont soustraites de la hauteur, et non ajouté, entraînant:

.modal { 
    margin: auto 0; 
} 
.overlay{ 
    padding: 4rem 0; 
    overflow-y:auto; 
    box-sizing: border-box; 
}

Source

2017-09-28 23:21:47

Nice! btw, ajoutant le remplissage 4rem 0 au récipient fonctionne mais maintenant le fond est découpé – nick

Nevermind je n'utilisais pas border-box – nick

Ne peut pas faire défiler vers le haut avec modal et superposition avec affichage flex

Répondre

Questions connexes