Процент пропуска макета CSS

Я создаю элемент HTML с 4 элементами в нем. Для этого родительский элемент является <ul> и каждый из 4 элементов <li>. Внутренние элементы должны занимать четверть высоты и всю ширину минус заполнение родителя, поэтому я дал родителям определенный размер в px, а у детей -%. Но вместо этого дети в конечном итоге занимают половину всего пространства, почему?

HTML

<ul class="content_selection_container">
    <li>
        <form name="search_form" class="search_form" id="FORM_3">
            <input type="text" name="search_input" class="search_bar" />
            <input type="submit" value="" class="search_button" name="search_button"/>
        </form>
    </li>
    <li>
        <button class="content_selection_button">
            My Timeline
        </button>
    </li>
    <li>
        <button class="content_selection_button">
            relevent
        </button>
    </li>
    <li>
        <button class="content_selection_button">
            mentions
        </button>
    </li>
</ul>

CSS

content_selection_container{
    background-color:red;
    padding: 5px;
    height: 150px;
    width: 300px;
}

.search_form{
    height: 25%;
    width: 100%;
    display: inline-block;
}
.content_selection_button{
    width: 100%;
    height: 25%;
    border: 1px;
}

.search_bar{
    background-color:white;
    box-shadow: rgb(204, 204, 204) 0px 0px 0px 1px inset;
    border: 1px solid rgb(178, 210, 203);
    border-radius: 8px;
    font-size: 12px;
    height: 100%;
    width: 90%;

}

.search_button {
    cursor: pointer;
    border: 1px;
    background-color: #d4d4d4;
    font-family: 'EntypoRegular';
    color: #5f615c;
    font-size: 20px;
    height: 100%;
    width: 10%;
}