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

css

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>

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>

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.

No answers here gave me comfort so I went and search for the truth. I added a bit more css to make a point on the spacing between two boxes.

CSS:

 .wrapper {
  background-color:gray;
}

.container {
    margin: 25px auto;
    display: inline-flex;
}

.leftbox {
    height: inherit;
    display: inline-block;
    border: 1px solid #D7D2CB;
    background-color: #FFFFFF;
    border-radius: 5px;
    max-width: 550px;
    margin-right: 18px;
    align-items: stretch;
    padding: 15px;
    width: 100%;
}

.rightbox {
    height: 100%;
    display: inline-block;
    border: 1px solid #D7D2CB;
    background-color: #FFFFFF;
    border-radius: 5px;
    align-items: stretch;
    max-width: 300px;
    width: 100%;
    padding: 20px 15px;
}

HTML:

<div class="wrapper">
  <div class="container">
    <div class="leftbox">
      There is something here, I am not avoiding it.
    </div>
    <div class="rightbox">
      Probably something else here but much much much much much much much much much much much much much much much much much much much much much much much much much much much much much bigger.
    </div>
  </div>
</div>

Check the codepen: https://codepen.io/anon/pen/XRNMMp

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

Related

Recent Posts