I have a some kind of smaller side container, #sideNavContainer, in a parent div, on the other side (to the right) is another div for the content.
When I put text into the #sideNavContainer that contains very long words without spaces, the words begin to break out of the container and overwrite stuff on the right side (content area).
I tried to force the content of the #sideNavContainer to break up those words, so that they continue on the next line, when they reach the right end of the container but I am not 100% satisfied as I expected that the words/sentences should also be broken on spaces preferably. Long words should start on the next line and then be broken down and not begin on the same line as the other text (after a space) and then continue (but be broken).
Here is some example to hopefully illustrate what I mean:
<div>
<div id="sideNavBox">
<span>Navigation and other Stuff</span>
<div id="subContainer">
I am a very long Text andIevenContainVeryLongWordsWithout spaces but my parent container(s) should not ChangeTheirWidthBecauseOfThis and break whenThereAreSpaces but longWordsWithoutSpaces shouldBeBrokenDown.
</div>
</div>
<div id="contentBox">
Hello, I am the main content
</div>
</div>
CSS:
body {
background-color: green;
}
#sideNavBox {
float: left;
margin-left: 20px;
width: 180px;
background-color: blue;
}
#subContainer {
background-color: grey;
word-break: break-all;
}
#contentBox {
background-color: yellow;
}
Fiddle: https://jsfiddle.net/qp74uxkt/11/
My desire/expectation was that the text would break after the words "I am a very long Text", then on the next line continue with "andIevenContain..." and this long word then can be broken at the end of the available space, based on the restrictions of the parent container. This also does not work when I use "hyphens: auto;". Can this even be done?

You can set word-break property as break-word. I have updated your code and created a new fiddle. I think it will solve your problem
Check it out https://jsfiddle.net/yvLb6zer/