要素があふれてスクロールバーが作成されるのはなぜですか？

Question

セクションはデフォルトでブロック要素です。私は間違って何をしていますか？これをどのように修正できますか？

私が持っているCSSはシンプルで、私は唯一の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/

Answer 1

を追加あなたはそれがインラインとして振る舞う理由ですcontinuous wordのlong textを持っているので、word-break:break-allを追加したり、以下のように

注意をspacingを追加 - section要素は、一般的なコンテナ要素ではありません。スタイリングの目的でのみ 要素が必要な場合、または スクリプト作成の便宜のために、作者は代わりにdiv要素を使用することをお勧めします。 A 一般的な規則は、要素の内容が文書の のアウトラインに明示的にリストされる場合にのみ、section要素が適切であることです。

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>

Answer 2

文字の間にスペースがある場合に、行が正常にラップすることができます。

（改行のための規則は。言語によって異なります）しかし、あなたのsection要素にそこには空白がないので、行が折り返されません。

があなたのCSSにこれを追加します。

section { word-break: break-all } 

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

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

Answer 3

あなたsectionのテキストは、ちょうど1単語全体であるので、オーバーフローします。フレックスボックスとは何の関係もありません。ただ、

section {word-wrap: break-word;}