firefox flexbox issue

by loopmode

HTML

<button class="ToggleButton has-icon has-text Button" type="button">
  <i class="Icon icon-svg caret_down">
    <svg width="11" height="6" viewBox="0 0 11 6" xmlns="http://www.w3.org/2000/svg">
      <path d="M.64.5l4.998 5 5-5h-10z" fill="#777" fill-rule="evenodd"></path>
    </svg>
  </i>
  <span class="text">Caching</span>
</button>
<br />
<button class="ToggleButton has-icon has-text Button" type="button">
  <span>
    left
  </span>
  <span>right</span>
</button>

CSS

.ToggleButton {
  display: flex;
  flex-firection: row;
  background-color: #00B400;
  color: white;
  border: none;
}
.ToggleButton svg path {fill: white;}