Getting inline-block element's height to fill the parent

Question

I have a container with two items. One of those items is a select element, so I need to set the size attribute via HTML. I want the other item in the container to stretch its height to fit the container. I can't figure it out. I don't want to explicitly set the height of the container because I don't know the size of that select box.

.container {    padding: 5px;    border: 1px solid black;  }    .container .column {    display: inline-block;    width: 40%;    background-color: #AAA;    padding: 5px;    margin: 5px;    vertical-align: top;    height: 100%;  }    select {    width: 100%;  }

<div class="container">    <div class="column">Stretch to fill?</div>    <div class="column">      <select size="15">              <option>Option 1</option>              <option>Option 2</option>          </select>    </div>    <div>

Answer 1

If table-cell is an option, here's a way to do it:

.container {    display: table;    width: 100%;    padding: 5px;    border: 1px solid black;  }    .container .column {    display: table-cell;    width: 40%;    background-color: #AAA;    padding: 5px;    border: 5px solid white;    vertical-align: top;    height: 100%;  }    select {    width: 100%;  }

<div class="container">    <div class="column">Stretch to fill?</div>    <div class="column">      <select size="15">              <option>Option 1</option>              <option>Option 2</option>          </select>    </div>    <div>

Answer 2

If I understand what you are saying, you are facing the 100% height columns problem. I'm sorry to tell you there is no actual solution but "hacks".

Here you can find several of those workarounds. I like to use the one true layout method.

By the way, this is thinking you don't want to use the experimental css3 columns properties.