flexbox, текст не переноситься во вложенном flexbox в ie11

.align{ 
  box-sizing: border-box; 
  display:flex; 
  flex-direction:row; 
  font-size:14px; 
  text-align:left; 
  width:514px; 
  border: 4px solid black; 
} 
.group{ 
  align-items: flex-start; 
  box-sizing: border-box; 
  display:flex; 
  flex-direction:row; 
  flex: 1 1 auto; 
  flex-wrap: wrap; 
  justify-content: flex-end; 
  text-align:left; 
  border: 4px solid red; 
} 
.item{ 
  box-sizing: border-box; 
  flex: 0 1 auto; 
  text-align:left; 
  border: 10px solid green; 
  margin:10px; 
} 
button{ 
  max-width: 100%; 
  width:auto; 
  display:inline-block; 
  text-align:right; 
  background-color:#007fad; 
  color:white; 
  height:auto; 
  overflow:visible; 
  border: 6px solid pink; 
} 
.wrap{ 
  align-items:flex-start; 
  box-sizing:border-box; 
  display:flex; 
  text-align:right; 
  text-transform:none; 
} 
.text{ 
  box-sizing:border-box; 
  text-align:right; 
  text-transform:none; 
   
}

<div class='align'> 
  <div class='group'> 
    <div class='item'> 
      <button title='ex' class='button'> 
        <span class='wrap'> 
          <span class='text'> ExampleButtonExampleButton  
          </span> 
        </span> 
      </button> 
    </div>  
    <div class='item'> 
      <button title='ex' class='button'> 
        <span class='wrap'> 
          <span class='text'> ExampleButtonExample ButtonExample ButtonExample ButtonExampleButton ExampleButtonExample ButtonExampleButton ExampleButtonExampleButton ExampleButtonExample ButtonExampleButton ExampleButton ExampleButton ExampleButtonExampleButtonExampleButtonExampleButton 
          </span> 
        </span> 
      </button> 
    </div>  
  </div> 
</div>