无法在嵌入图像的Div中自动调整高度

Question

我经历了所有其他类似的问题但无济于事，但由于某种原因我不能自动调整这个嵌套了ul，li和图像的div

我希望div .myinteresttab 根据窗口大小更改其高度，并使图像适合移动到下一行。到目前为止，overflow：auto属性似乎只是创建了一个滚动条，但我不想要滚动条。

这是小提琴： http://jsfiddle.net/qnGKj/2072/

HTML：

<!-----------------Detail Info-------------------------->      
                      <div class="shares">
                        <div class="sharesection">

<h2 class="infosubtitles">Going places Blog<br />  


<div class="detailtitles"><p class="infosubcategory">Visited</p> </div> 



<div class="myinteresttab">

    <ul>
        <li>
            <input type="radio" name="visited" checked="checked" id="countriestab" /><label for="countriestab">Countries</label>
            <div>
                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">America</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Curacao</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Mexico</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Korea</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Bahamas</p></div>

            </div>
        </li>


        <li>
            <input type="radio" name="visited" id="statestab" /><label for="statestab">States</label>
            <div>
                <img class="infopics" src="images/nopicsmall.png"> <img class="infopics" src="images/nopicsmall.png"> <img class="infopics" src="images/nopicsmall.png"> <img class="infopics" src="images/nopicsmall.png">
            </div>
        </li>



        <li>
            <input type="radio" name="visited" id="placestab" /><label for="placestab">Places</label>
            <div>
                <img class="infopics" src="images/nopicsmall.png">
            </div>
        </li>
    </ul>
</div>
</div></div>

CSS：

.shares
{
    background-color: #FFF;
    display: inline-block;
    height: auto;
    position: relative;
    width:100%;
}
.sharesection
{
    display: inline-block;
    height: 100%;
    position: relative;
    width: 100%; border-bottom:#000 1px solid;
}



.infopics { margin-top:10px; margin-right:15px; display: inline-block; }

.imageword {margin-left:10px;}



.myinteresttab ul,
.myinteresttab li
{
    margin: 0; 
    padding: 0; 
    list-style: none;
}

.myinteresttab,
.myinteresttab input[type="radio"]:checked + label
{
    position: relative;
}

.myinteresttab li,
.myinteresttab input[type="radio"] + label
{
    display: inline-block;
}

.myinteresttab li > div,
.myinteresttab input[type="radio"]
{
    position: absolute; 
}

.myinteresttab
{
    font: normal 15px Arial, Sans-serif;  height: auto;
    color: #000; float:left; width:92%; margin-top:15px; min-height:120px; margin-left: 5%; margin-right: 4%;  background:#339933;
}



.myinteresttab li:first-child
{
    margin-left:0;
}

.myinteresttab li > div
{
    top: 13px;
    bottom: 0; 
    left: 0;
    width: 100%;

}

.myinteresttab input[type="radio"] + label
{
margin-left:0px; padding-right:19px;
    cursor: pointer;
}

.myinteresttab input[type="radio"]:checked + label
{
    z-index: 1;
 color:#33CCFF;
    border-bottom-color: #fff;
    cursor: pointer;
}


.myinteresttab input[type="radio"]:hover + label
{
    z-index: 1;
     cursor: pointer;
    border-bottom-color: #fff; text-decoration:underline;
    cursor: pointer;
}


.myinteresttab input[type="radio"]
{
    opacity: 0;
}

.myinteresttab input[type="radio"] ~ div
{
    display: none;
}

.myinteresttab input[type="radio"]:checked:not(:disabled) ~ div
{
    display: block;
}

.myinteresttab input[type="radio"]:disabled + label
{
    opacity: .5;
    cursor: no-drop;
}

我还是新手，所以请通过更新jsfiddle来回复很多细节或更好。谢谢。