Flexbox not wrapping text-CodePudding

a simple jsfiddle snippet is here : https://jsfiddle.net/aov67q3e/ For some reason the text is not wrapping.

<div style="display:flex; border: 1px solid red;   max-width: 200px;">
<div style="padding: 8px;display: flex;flex-wrap: wrap;">
<div style="padding: 8px 0px;"> You are 25 Degrees away. </div>
<div style="padding: 8px 0px;">           ladkfjdlakdjflkajklfdjakljflajlkfdalkjflkajklfjalkjfljalf&gt;ladkfjdlakdjflkajklfdjakljflajlkfdalkjflka33e23234jklfjalkjfljalf
</div>

CodePudding user response：

Just add "word-wrap: break-word;" to the parent div and the text will wrap.

I also recommend adding "box-sizing: border-box;" so that you can maintain the width of 200px.

Below is the code:

<div style="max-width: 200px;
        height: fit-content;
        border: 1px solid red;
        word-wrap: break-word;
        box-sizing: border-box;
        padding: 8px;">
        <div style="display: flex;flex-direction: column;gap: 8px;">
            <div>You are 25 Degrees away.</div>
            <div>            ladkfjdlakdjflkajklfdjakljflajlkfdalkjflkajklfjalkjfljalf>ladkfjdlakdjflkajklfdjakljflajlkfdalkjflka33e23234jklfjalkjfljalf
            </div>
        </div>
    </div>

CodePudding user response：

It's not really flexboxes job to wrap the text in this case.

First off all, you need to set the width of the parent div. 100% will do. Second, you need to set the width of the closest div and specify that it should break words without spaces.

What it could look like (taking your example)

<div style="display:flex; border: 1px solid red; max-width: 200px;">
  <div style="padding: 8px;display: flex; flex-wrap: wrap; width: 100%;">
    <div style="padding: 8px 0px;"> You are 25 Degrees away. </div>
    <div style="padding: 8px 0px; width: 100%; word-wrap: break-word;">ladkfjdlakdjflkajklfdjakljflaj lkfdalkjflkajklfjalkjfljalf&gt;ladkfjdlakdjflkajklfdjakljflajlkfdalkjflka33e23234jklfjalkjfljalf
    </div>
  </div>
</div>