title: How to prevent a DIV from expanding in width?
body: <p>How do I prevent a <code>div</code> from expanding in width?</p>
  
  <p>I'd like <code>.dont-expand</code> to pretend that <code>width: 100%;</code> means "100%, but not counting myself".  Basically, compute <code>width: 100%;</code> (ignoring itself), and setting that width in pixels <code>width: Npx;</code> -- in CSS and not JS.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.outer {
    position: absolute;
    border: 1px solid black;
  }
  
  /* This element sets the width of the container */
  .has-width {
    width: 300px;
    margin-top: 10px;
    background: rgba(0,128,0,.2);
    border-right: 2px solid green;
    color: #888;
  }
  
  .dont-expand {
    /* width: ??? */
    
    /* This would be nice       */
    /* expand: false;           */
    
    /* Or this                  */
    /* width: toPx(100%);       */
    
    /* Or this                  */
    /* width: calc(100% + 0px); */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="outer"&gt;
      &lt;div class="dont-expand"&gt;
        How do I get this text to wrap
        instead of growing the container?
      &lt;/div&gt;
      &lt;div class="has-width"&gt;
        I should be setting the width of "container".
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsbin.com/zeqayelobi/edit?html,css,output" rel="nofollow noreferrer">jsbin link</a></p>