获取内联块元素的高度以填充父级

Question

我有一个有两件物品的容器.其中一个项是select元素,所以我需要size通过HTML 设置属性.我希望容器中的其他项目伸展其高度以适合容器.我无法弄清楚.我不想明确设置容器的高度,因为我不知道该选择框的大小.

.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

如果table-cell是一个选项,这是一种方法:

.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

如果我理解你在说什么,你就会面临100%高度列问题.我很遗憾地告诉你,没有实际的解决方案,但"黑客".

在这里,您可以找到其中几种解决方法.我喜欢使用一种真正的布局方法.

顺便说一句,这是在想你不想使用实验性的css3列属性.

Answer 3

这里没有答案给我安慰，所以我去寻找真相。我添加了更多的CSS以使两个框之间的间距更清晰。

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>

检查代码笔：https ://codepen.io/anon/pen/XRNMMp