div not obeying height - html

Question

I'm trying to create an element with a div in it, the div is a slightly smaller box then the outer, and makes it appear as a border withing the outer box.. hard to verbalize. the div contains several ul's that I want to maintain a height of 64px, and I want the div to have a set height also. however, the div seems unresponsive to any height I set in css, it just wants to do its own thing I guess and instead has decided that it should base its height on how many ul's there are within it.. I was hoping someone could explain whats going on with it, why it wont obey my commands, and possibly offer a solution.
here's the css:
#selectUnitScreen {
overflow: hidden;
min-width:390;
min-height:350;
left:5%;
top:5%;
bottom:5%;
right:5%;
padding:5%;
border-left: solid red 5px;
border-right:solid red 5px;
border-top: solid red 12px;
border-bottom: solid red 12px;
}
#selectUnitScreen ul {
height:64px;
}
#selectUnitScreen li {
font-size:25px;
padding-left: 5%;
display: inline-block;
}
#buildUnitScreen {
padding: 3px;
position: absolute;
z-index: 10;
border-radius: 2%;
border: 3px solid black;
width:400px;
height:470px;
background: white;
box-shadow: 4px 0px 2px 1px black;
left:260px;
top:200px;
}
and the HTML:
<section id="buildUnitScreen">
<div id="selectUnitScreen">
<ul id="build">
<li class="name">
infantry
</li>
<li class="cost">
1000
</li>
</ul>
<ul id="build">
<li class="name">
mechenized infantry
</li>
<li class="cost">
3000
</li>
</ul>
</div>
jsfiddle: https://jsfiddle.net/FJV8b/

Answer 1

The problem lies in your not setting units for the min-height and min-width. You say 390 and 350 but what are those? px? Otherwise those values are ignored. So:
min-height:350px;