title: Flexbox behavior - Chrome vs Firefox
body: <p>I am trying to use a Flexbox and a table together. The output displays differently on Firefox than on Google Chrome and Safari. I have observed that on Google Chrome and Safari, the td elements wrap. Also, the max-width of each td does not exceed 50%. However, on Firefox, these styling rules are ignored (even though when I go to the code console, they aren't crossed out, which means they should be respected by the browser). On Firebox, when I shrink the window, the images shrink, but they never wrap.</p>
  
  <p>This is less about whether using a table is a best practice or not. Can someone explain why this behavior varies between browsers even though all these browsers ostensibly support flexboxes. I tried the moz prefix, but it didn't work. I've checked <a href="http://caniuse.com/" rel="nofollow">caniuse.com</a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes" rel="nofollow">Mozilla documentation</a> on flexboxes, and both indicate that Flexboxes are fully supported. </p>
  
  <p>These's the CSS:</p>
  
  <pre><code>tr
  {
      margin: 0;
  
      display: flex;  
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      align-content: center;
  
      display: -webkit-flex;
      -webkit-flex-wrap: wrap;
      -webkit-justify-content: space-around;
      -webkit-align-items: center;
      -webkit-align-content: center;
  }
  
  td
  {
      padding: 1em 1em 1em 1em;
      text-align: center;
      max-width: 50%;
  
      flex-shrink: 1;
      flex-grow: 1;
  
      -webkit-flex-shrink: 1;
      -webkit-flex-grow: 1;
  }
  </code></pre>
  
  <p>And here's the HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;table&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;a href=""  target="_blank"&gt;&lt;img src="../images/gifs/gummo.gif" /&gt;&lt;/a&gt;&lt;/td&gt;
            &lt;td&gt;
                &lt;div id="gummo-quote" class="gif-copy"&gt;
                &lt;p&gt;Lorem ipsum etc.&lt;/p&gt;
                &lt;p&gt;Lorem ipsum etc.&lt;/p&gt;
              &lt;/div&gt;
             &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  </code></pre>