Le contenu ne reste pas dans Wrapper Grid; Fixe la barre latérale pour les grands écrans

Question

Je suis en train de faire une mise en page simple réponse d'une page Web, et a rencontré deux problèmes:

1. Je suis en train faire la barre latérale (contenant en-tête, navigation et pied de page) un fixe barre lorsque vous utilisez un écran de plus de 660px de largeur.

2. Lors de l'étirement de l'écran à 800px, j'ai remarqué que le texte fictif que j'ai placé dans le conteneur principal déborde.

   est ici une partie du code:

   .wrapper{ display:grid; grid-template-columns: 1fr 4fr;} 
   

code complet:

https://codepen.io/Aeshtray/pen/GvPdoQ/

Et une capture d'écran de ce que je voulais dire par le contenu débordant: https://i.stack.imgur.com/AXtrz.png

Answer 1

A solution simple serait pour utiliser overflow: auto; sur la .main classe

Answer 2

ok. Le conteneur principal est de taille fixe, donc il ne sera pas étendu avec du texte. Vous avez juste besoin de donner div principal overflow-y: auto;. Code mis à jour ici codepen