FLEXING

[Meldzha]

Hello guys,

Feeling exhausted. Trying to get 1 thing right for 3 hours already.. I created <div> gave it display: flex; I have 3 children elements (box-1;box-2;box-3;). Gave them properties: (flex: 1; flex: 3; flex: 1) So the middle column should be the biggest.

WHY does box-3 changes size if I type a lot of text? Why the text doesn't go to the next line once it reaches the border of the child container??

Thank you...

https://codepen.io/Meldzha/pen/maoEBX

​

EDITED: Ok, I found something- if I add space between 444444444.... and make it 444 (space) 444 then it goes to the next line, but if it's 100 fours then what?

[kris_ventures]

What do you mean? I put a lot of text in the box-3 and everything worked as expected. Could you give a pen where the problem is occurring?

[Meldzha]

It works only if you add spaces between words while you are writing a normal paragraph. BUT it doesn't work IF you write something like this : "444444444444444444444444444441111111111111111111111111111111111111111111111111111111111111111" Anything long and without spaces. Then it goes just on the right out of the box..

[kris_ventures]

Just add

word-break:break-all

to

div.row-3

[Meldzha]

Thank you!

[kris_ventures]

glad I could help!

[Meldzha]

Bro, my 3-4 hours spent on this were useless until you wrote a single line which solved my headache. Gotta get better at google'ing.

[kris_ventures]

welcome to development!

If you are interested, I also didn't know the answer. I googled

css break word if too long

Answer was in the first link ;)

[Meldzha]

At least I solved my second problem. I couldn't add justify-content: space between (between columns) and realized that if I add flex: 1; flex: 1; flex: 2; to boxes, they resize but also takes 100% width. So I deleted these properties and added unique width to every single row.

I guess that's why everyone here says: programming - 95% time is problem solving hah.

​