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

Question

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>

Leave a Comment Cancel reply