title: Applying min-height to List item
body: <p>I am using a bootstrap theme with Laravel framework and I'm experiencing issues allowing a list item to increase height based on its contents. </p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/h66br41p/" rel="nofollow noreferrer">http://jsfiddle.net/h66br41p/</a></p>
  
  <p>I have changed:</p>
  
  <pre><code>.framemail .window .mail li i {
  display: inline-block;
  height: 70px;
  width: 6px;
  }
  </code></pre>
  
  <p>To:</p>
  
  <pre><code>.framemail .window .mail li i {
  display: inline-block;
  min-height: 70px;
  width: 6px;
  }
  </code></pre>
  
  <p>This is producing no difference. It is still the fixed height of 70px regardless of contents. </p>
  
  <p>here is any other css targeting this area:</p>
  
  <pre><code>.framemail .window .mail li {
  background-color:#3d3d3d;
  background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
  background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
  background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
  background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
  background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
  border-top: 1px solid #888;
  position: relative;
  margin-left:-18px;
  }
  
  .framemail .window .mail li:first-child {
  border-top: none;
  }
  
  .framemail .window .mail li:hover {
  background-color: #5d5b5b;
  }
  
  .framemail .window .mail li:after,
  .framemail .window .mail li:before {
  border-left: 8px solid transparent;
  content: '';
  height: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  }
  
  .framemail .window .mail li i {
  display: inline-block;
  height: 70px;
  width: 6px;
  }
  
  .framemail .window .mail li .read {
  background-color: #ddd;
  }
  
  .framemail .window .mail li .unread {
  background: #b2c831;
  }
  
  .framemail .window .mail li img {
  border-radius: 2px;
  height: 36px;
  left: 12px;
  position: absolute;
  top: 6px;
  width: 36px;
  }
  
  .framemail .window .mail li p {
  font: 13px sans-serif;
  left: 56px;
  position: absolute;
  top: 3px;
  }
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;ul class="mail"&gt;
                      &lt;li&gt;
                          &lt;i class="unread"&gt;&lt;/i&gt;
                          &lt;img src="/assets/img/logo80x80.png" alt="avatar"&gt;
                          &lt;p class="sender"&gt;Dashboard&lt;/p&gt;
                          &lt;p class="message"&gt;You have been successfully verified&lt;br&gt;Clipping&lt;br&gt;Clipping&lt;/p&gt;
                          &lt;div class="actions"&gt;
                              &lt;a&gt;&lt;img src="http://png-4.findicons.com/files//icons/2232/wireframe_mono/16/trash.png" alt="delete"&gt;&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;i class="unread"&gt;&lt;/i&gt;
                          &lt;img src="/assets/img/logo80x80.png" alt="avatar"&gt;
                          &lt;p class="sender"&gt;Dashboard&lt;/p&gt;
                          &lt;p class="message"&gt;You have been successfully verified&lt;/p&gt;
                          &lt;div class="actions"&gt;
                              &lt;a&gt;&lt;img src="http://png-4.findicons.com/files//icons/2232/wireframe_mono/16/trash.png" alt="delete"&gt;&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/8wyQF.jpg" alt="enter image description here">
  I wish for these to list items to resize based on the text inside. What is making them fixed?</p>