Why are my elements overflowing and creating a scroll bar?

Question

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/

Michael Benjamin · Answer 1 · 2017-05-03T11:54:15.713

2

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

edited May 03 '17 at 11:54

answered May 03 '17 at 10:55

Michael Benjamin

346,931
104
581
701

Maybe `word-wrap: break-word` would be a better choice here. I think this will break regular words as well (which is usually not the desired result) – Danield May 03 '17 at 11:55
@Danield, thanks for the feedback. `word-wrap` is [deprecated](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap?v=example), I believe (it's now `overflow-wrap`). Regardless, your point may be valid. For anybody interested, here's a good discussion of the difference between the two: http://stackoverflow.com/q/1795109/3597276 – Michael Benjamin May 03 '17 at 12:24
1

You're right that `word-wrap` is deprecated, but the problem is that `overflow-wrap` isn't fully supported - http://caniuse.com/#feat=wordwrap - so that's why I'm still sticking with word-wrap :) – Danield May 03 '17 at 12:27

score 1 · Answer 2 · answered May 03 '17 at 10:57

1

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;}

answered May 03 '17 at 10:57

kosiokarchev

96
6

score 1 · Accepted Answer · answered May 03 '17 at 11:00

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>

Why are my elements overflowing and creating a scroll bar?

3 Answers3