title: How to make element fit the parent width CSS
body: <p>I'm trying to build an HTML UI.</p>
  
  <p>Here's what I've done:</p>
  
  <p><a href="https://i.stack.imgur.com/R26zQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R26zQ.png" alt="what I&#39;ve done"></a></p>
  
  <p>The width of the parent <code>div</code> is auto changing to contain all the buttons inside it.</p>
  
  <p>For example, when there are 3 buttons:</p>
  
  <p><a href="https://i.stack.imgur.com/q9tuP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q9tuP.png" alt="three buttons"></a></p>
  
  <p>I'm trying to add an option to add a button. I added a text box and a save button after the buttons.</p>
  
  <p><a href="https://i.stack.imgur.com/Pwg00.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pwg00.png" alt="with text box"></a></p>
  
  <p>But for some reason, the text box takes a lot of width and makes the parent grow.</p>
  
  <p>How can I make the text box width be as the parent's width?</p>
  
  <p>my code: </p>
  
  <pre><code>&lt;div id="savedSets" class="cotentBox" style="margin-right: auto; margin-left: auto;max-width: 90%; display: table;"&gt;
    &lt;h3 class="header"&gt;Use saved sets&lt;/h3&gt;
  
    &lt;div class="content"&gt;
      &lt;div id="setButtons"&gt;
        &lt;button class="button savedSetButton"&gt;Set 2&lt;/button&gt;
        &lt;button class="button savedSetButton"&gt;Set 1&lt;/button&gt;&lt;/div&gt;
      &lt;div id="newSet"&gt;
        &lt;button id="saveNewSet" class="button"&gt;Save new set!&lt;/button&gt;
       &lt;input type="text" id="newSetName"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks.</p>