Chrome table cell size bug

by Simon Herteby

HTML

<div class="flexbox">
  <table>
    <tr>
      <td id="target"></td>
      <td>Stuff</td>
    </tr>
  </table>
  <button onclick="insertText()">Insert text</button>
  <h3>1. Click on "Insert text"</h3>
    <p>The first cell should now contain "Hello!". The width should also change with the content, but in Chrome this doesn't happen.</p>
    <h3>2. Resize the window</h3>
    <p>Now the width should have been updated as expected.</p>
</div>

CSS

.flexbox{
  display:flex;
  flex-direction:column;
}
td{
  border: 1px solid grey;
  padding:10px;
}

JavaScript

window.insertText = function(){
	document.getElementById('target').innerText = 'Hello!'
}