title: textarea width not constrained by max-width when inside table
body: <p>Hate to ask, as there's a bunch of seemingly related answers on SO already, but I can't find this exact combo.</p>
  
  <p>I have a table containing a textarea, the textarea has a large cols attribute, but the textarea breaks its constraints even when max-width is applied.</p>
  
  <p>Here is a working solution when the container is a div:
  <a href="https://codepen.io/davewallace/pen/zwwRoN" rel="nofollow noreferrer">https://codepen.io/davewallace/pen/zwwRoN</a></p>
  
  <pre><code>.container {
      border:2px solid orange;
      width: 200px;
      padding: 10px; // added for clarity
  }
  .sub-container {
      padding: 10px; // added for clarity
      border:1px solid green;
  }
  textarea {
      max-width: 100%; // correctly constrained within the container's width
      border:1px dashed red;
  }
  
  &lt;div class="container"&gt;
      &lt;div class="sub-container"&gt;
          &lt;textarea cols="80" rows="20" placeholder="Please don't outgrow the container!"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the same setup, but the container is instead a table (> tr > td):
  <a href="https://codepen.io/davewallace/pen/EmmQNW" rel="nofollow noreferrer">https://codepen.io/davewallace/pen/EmmQNW</a></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;table class="sub-container"&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;textarea cols="80" rows="20" placeholder="Please don't outgrow the container!"&gt;&lt;/textarea&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  .container {
      border:2px solid orange;
      width: 200px; // explicitly set to demonstrate, however I am actually using flexbox with a flex-basis value defined, with the same effect exhibited
      padding: 10px; // added for clarity
  }
  .sub-container {
      border: 1px solid green;
  }
  textarea {
      max-width: 100%; // should limit the default width provided by cols?
      margin: 10px; // added for clarity
      border:1px dashed red;
  }
  </code></pre>
  
  <hr>
  
  <p>By specifying <code>width: 100%</code> as well as <code>max-width</code> on the table-constrained textarea, the constraints then are applied. I would like to avoid explicitly adding a width rule.</p>
  
  <p><em>So my question is, is there an elegant solution where I don't have to supply an explicit width rule, that will allow container width to be respected by the child textarea?</em></p>
  
  <p>Please note: I'm dealing with legacy code, so replacing the table is not a solution I can immediately consider.</p>
  
  <p>Initially I was wondering if dropping the <code>cols</code> attribute from the textarea might suit, however that doesn't seem like the optimal solution and also would require me diving into legacy code that should not (yet) be touched.</p>