chevauche lors de l'utilisation mise en page liquide

Question

This possible duplicate didn't help me

Mon code est très simple ->My code, Plunker

Je veux que mon texte ne se chevauchent pas et maintenir le pourcentage de la barre latérale 7% et le contenu 90%.
Comment puis-je faire cela tout en conservant ma disposition Liquid?

Answer 1

Le contenu à l'intérieur de votre barre latérale est deux gros et dépasse les limites du conteneur. Si vous ajoutez un dépassement: caché dans votre barre latérale, vous verrez que seuls les points de la liste apparaissent.

Les marges sur l'UL poussent tout dehors, aussi les mots ne rentrent pas dans une taille d'écran de largeur de 7%. Vous pouvez utiliser le mot-break: break-all; règle de CSS3, mais il ne fonctionne pas dans certains navigateurs http://caniuse.com/#search=word-break

.sidebar ul{ 
    width:100%; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
    word-break:break-all; 
}