CODEWITHSUNDEEP
htmlcssflexbox
alexis
alexis

Reputation: 397

Why are my elements overflowing and creating a scroll bar?

Sections are block elements by default. What am I doing wrong and how can I fix this?

The css I have is simple and I'm adding an styling to the sections parent which is the only div.

h1 {
  text-align: center;
}

ul {
  display: flex;
  justify-content: flex-end;
  margin: 0 20%;
}

li {
  margin: 5px;
  list-style: none;
}
<h1>
  example
</h1>
<ul>
  <li>rfg</li>
  <li>ert</li>
  <li>sghgh</li>
  <li>sgh</li>
</ul>

<div>
  <section>
    fnflsnljnlfjnljsljrljnlkfjgnljritljfnglejrtldlfkgjvncmdkfjghtredkfvncxmcnvhfjdkjsklwoeiruthgnbhtruejfhvbcnmznxcbfgrehjwkweuryturioepoifugvnvbfhncjdgturieowwoeirujdnbfgrgvtbnhjbgkklfodisjzhxvsfaghweyrghjcvhfjdiwowpowieurytgfhjdcnncfhdnfhfdfhgffghfnfhn
  </section>
  <section>
    fnflsnljnlfjnljsljrljnlkfjgnljritljfnglejrtldlfkgjvncmdkfjghtredkfvncxmcnvhfjdkjsklwoeiruthgnbhtruejfhvbcnmznxcbfgrehjwkweuryturioepoifugvnvbfhncjdgturieowwoeirujdnbfgrgvtbnhjbgkklfodisjzhxvsfaghweyrghjcvhfjdiwowpowieurytgfhjdcnncfhdnfhfdfhgffghfnfhn
  </section>
  <section>
    fnflsnljnlfjnljsljrljnlkfjgnljritljfnglejrtldlfkgjvncmdkfjghtredkfvncxmcnvhfjdkjsklwoeiruthgnbhtruejfhvbcnmznxcbfgrehjwkweuryturioepoifugvnvbfhncjdgturieowwoeirujdnbfgrgvtbnhjbgkklfodisjzhxvsfaghweyrghjcvhfjdiwowpowieurytgfhjdcnncfhdnfhfdfhgffghfnfhn
  </section>
  <section>
    fnflsnljnlfjnljsljrljnlkfjgnljritljfnglejrtldlfkgjvncmdkfjghtredkfvncxmcnvhfjdkjsklwoeiruthgnbhtruejfhvbcnmznxcbfgrehjwkweuryturioepoifugvnvbfhncjdgturieowwoeirujdnbfgrgvtbnhjbgkklfodisjzhxvsfaghweyrghjcvhfjdiwowpowieurytgfhjdcnncfhdnfhfdfhgffghfnfhn
  </section>
</div>

https://jsfiddle.net/9ewcexpz/11/

Upvotes: 2

Views: 65

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371371

In the English language, lines can normally wrap when there is a space between letters. (The rules for line breaks vary among languages.)

But in your section element there is no whitespace, so the lines don't wrap.

Add this to your CSS:

section { word-break: break-all }

https://jsfiddle.net/9ewcexpz/19/

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

Upvotes: 2

frnt
frnt

Reputation: 8795

You have a long text of continuous word that's why it behaving as inline, so add word-break:break-all or add spacing as below,

Note - The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

h1{
  text-align: center;
}
ul{
  display: flex;
  justify-content: flex-end;
  margin:0 20%;
}
li{
  margin: 5px;
  list-style: none;
}
<h1>
example
</h1>
<ul>
  <li>rfg</li>
  <li>ert</li>
  <li>sghgh</li>
  <li>sgh</li>
</ul>

<div>
  <section>
 fnflsnljnlfjnljsljrljn lkfjgnljritljfnglejrtldl fkgjvncmdkfjghtre dkfvnc x mcnvhfj dkjsklwoeir uthgnbhtr uejfhvbc nmznxcbfgre hjwkweurytur ioepoifugvnvbfhnc jdgturieowwoe irujdnbfgrgvtbnhj bgkklfodisjzhxvsf aghweyrghjcvhfjdi wowpowieurytgf hjdcnncf hdnfhfdf hgffghfnfhn
 </section>
 
 <section>
 fnflsnljnlfjnljsljrljn lkfjgnljritljfnglejrtldl fkgjvncmdkfjghtre dkfvnc x mcnvhfj dkjsklwoeir uthgnbhtr uejfhvbc nmznxcbfgre hjwkweurytur ioepoifugvnvbfhnc jdgturieowwoe irujdnbfgrgvtbnhj bgkklfodisjzhxvsf aghweyrghjcvhfjdi wowpowieurytgf hjdcnncf hdnfhfdf hgffghfnfhn
  </section>
  <section>
 fnflsnljnlfjnljsljrljn lkfjgnljritljfnglejrtldl fkgjvncmdkfjghtre dkfvnc x mcnvhfj dkjsklwoeir uthgnbhtr uejfhvbc nmznxcbfgre hjwkweurytur ioepoifugvnvbfhnc jdgturieowwoe irujdnbfgrgvtbnhj bgkklfodisjzhxvsf aghweyrghjcvhfjdi wowpowieurytgf hjdcnncf hdnfhfdf hgffghfnfhn
 </section>  
 <section>
 fnflsnljnlfjnljsljrljn lkfjgnljritljfnglejrtldl fkgjvncmdkfjghtre dkfvnc x mcnvhfj dkjsklwoeir uthgnbhtr uejfhvbc nmznxcbfgre hjwkweurytur ioepoifugvnvbfhnc jdgturieowwoe irujdnbfgrgvtbnhj bgkklfodisjzhxvsf aghweyrghjcvhfjdi wowpowieurytgf hjdcnncf hdnfhfdf hgffghfnfhn
  </section>  
</div>

Upvotes: 1

kosiokarchev
kosiokarchev

Reputation: 96

Your section's text is just one whole word, so it overflows. It has nothing to do with the flexbox. Just add

section {word-wrap: break-word;}

Upvotes: 1

Related Questions