title: list group with scroll in bootstrap?
body: <p>i have a razor view with this list:</p>
  
  <pre><code>&lt;div class="list-group" id="product-filter-data"&gt;
                  &lt;div class="list-group-item row text-left"&gt;
                      &lt;div class="col-sm-1 text-left"&gt;
                          &lt;label class="checkbox-inline"&gt;
                              &lt;input type="checkbox" id="check-all" value="option1"&gt; All
                          &lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-1 m-l-l text-left"&gt;
                          &lt;input type="button" class="btn btn-tiny btn-default" id="check-none" value="select none"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="list" style="max-height: 300px;" class="overflow-y-scroll"&gt;
                      @foreach (var item in Model.Items)
                      {
                          &lt;div class="list-group-item row"&gt;
                              &lt;div class="col-sm-1 text-left"&gt;
                                  &lt;label class="checkbox-inline"&gt;
                                      &lt;input type="checkbox" name="IdContainers" value="@item.IdContainer"&gt; Select
                                  &lt;/label&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-2"&gt;
                                  &lt;a class="media-left" href="@Url.Action("Product", "Container", new { id = item.IdContainer })"&gt;
                                      @Html.DisplayFor(m =&gt; item.Image)
                                  &lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-9"&gt;
                                  &lt;div class="media-body"&gt;
                                      &lt;h4 class="media-heading product_name"&gt;@item.DisplayName&lt;/h4&gt;
                                      @Html.Raw(item.Description)
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      }
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>My problem is that the result is not lined up the first row with the scrollable ones.
  <img src="https://i.stack.imgur.com/3KHOs.png" alt="enter image description here"></p>
  
  <p>Is there a way that the scroll keep the alignment?</p>