How to align two divs (one fixed and the other with break word attribute)?

Question

I'm having problems with the attibute "word-wrap:break-word;" when trying to align horizontally with another DIV and its inside a DIV. Easy to understand my problem seeing this two examples:

#container {
  height: auto;
  overflow: hidden;
}
#left {
  background-color: green;
  width: 120px;
  height: 20px;
  overflow: hidden;
}
#right {
  width: calc(100% - 120px);
  float: right;
  height: auto;
  display: inline-block;
  word-wrap: break-word;
  background-color: red;
}

<div id="container">
  <div id="right">AAAAAAAAAAAAAAAAAAAAA</div>
  <div id="left"></div>
</div>

http://jsfiddle.net/galacticpower/a3nyxhtj/4/

Here, if the navigator is resized, the right div text is broken as needed! Yeah!

Adding a div inside the right div and its style comes the problems...

#inside_right{
  width: auto; 
  display: inline-block; 
  word-wrap:break-word;
  background-color: yellow;
}

<div id="container">
  <div id="right">
    <div id="inside_right">AAAAAAAAAAAAAAAAAAAAA</div>
  </div>
  <div id="left"></div>
</div>

http://jsfiddle.net/galacticpower/a3nyxhtj/3/

Here if the navigator is resized the "word-wrap:break-word" attribute is lost. The text is not broken! I need to apply some style in a div inside the right div without losing this behaviour.

To summ up, I want that the words were broken in the second example...

Any ideas?

Thank you so much!

Answer 1

Simply apply max-width: 100% to force the letters to actually break inside the inline-block #inside_right

#container {
    height: auto;
    overflow: hidden;
}

#left{
	  background-color: green;
    width: 120px;
    height: 20px;
    overflow: hidden;
}

#right{
  width: calc(100% - 120px); 
  float: right; 
  height: auto;
  display: inline-block; 
  word-wrap:break-word;
  background-color: red;
}

#inside_right{
  width: auto; 
  display: inline-block; 
  word-wrap:break-word;
  background-color: yellow;
  max-width: 100%;
}

<div id="container">
    <div id="right">
      <div id="inside_right">
         AAAAAAAAAAAAAAAAAAAAA 
      </div>
    </div>
    <div id="left"></div>
</div>