<div class="outer">
  Outer div
  <div class="inner">
    Inner div
  </div>
</div>

<article>
  <h2>Learning</h2>
  <ul>
    <li>
      Add position <code>fixed</code> to the <i>inner div</i>, you would see the width will be equal to the width of the content inside.
    </li>
  </ul>
</article>
.outer {
  width: 500px;
  background-color: dodgerblue;
}

.inner {
  background-color: yellow;
}

/* only for appearance */
html {
  font-size: 125%;
  font-family: Tahoma;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.