title: Expand DIV to its UL content
body: <p>I have a <strong>div</strong> container and a <strong>ul</strong> within it. I want that the <strong>div</strong> be expanded to its content <strong>ul</strong>. I've tried everything I found (overflow:hidden, clearfix etc ...), but nothing worked.</p>
  
  <p>UPDATE: originally this is a slider with a crossfade effect, where the images are overlapped with each other. So, the solution which causes that the images will be in a column (same left, but different top values) doesn't good for me.
  Please, show me the pure HTML/CSS solution, without 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>.slider {
    position: relative;
    padding: 0;
    margin: 0 auto;
    border: 1px solid black;
  }
  
  .slider img {
    max-width: 100%;
    display: block;
  }
  
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  li {
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slider" style="max-width: 880px;"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;img src="https://placeimg.com/400/200/any" style="width:100%"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="https://placeimg.com/400/200/tech" style="width:100%"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="https://placeimg.com/400/200/animals" style="width:100%"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>