Css 使浮动div为使用最小高度的父级的100%高度，同时仍允许父级展开

我正在尝试创建一个项目列表，其中列表中的每个项目基本上包含两列。。。左栏有一些文本，右栏有两个按钮表示是/否。我希望右侧的两个按钮与文本垂直对齐。出于美观的原因，我希望列表项上有一个最小高度。我最终发现，浮动div必须位于绝对div内，才能使100%的高度起作用。现在的问题是，我的原始相对div中有一个绝对div，它不再扩展以容纳超过最小高度的文本。我读过这么多的文章，尝试过这么多不同的高度/相对/绝对/浮动/清除/溢出组合，但对我的情况没有任何效果。有解决办法吗

在这里的示例中，我需要红色框与蓝色框具有相同的高度，以便垂直对齐工作

<div class="list_container">
  <div class="list_item">
    <div class="item_text">
        My text in this item.  This could be a variable length creating a div ranging from about 75-150px in height.  This is a lot of text to make it longer although I am not really saying anything here.  It is only to make the blue box taller than the red box.
    </div>
    <div class="item_buttons">
      <div class="buttons_inner">
        <div class="button button_yes">Y</div>
        <div class="button button_no">N</div>
      </div>
    </div>
  </div>
</div>

.list_container { position: relative; width: 400px; }
.list_item { position: relative; min-height: 70px; overflow: hidden; border: #000000 solid 1px; }
.item_text { float: left; width: 340px; background-color: #0066BB }
.item_buttons { display: table; float: right; width: 50px; height: 100%; background: #FF0000; }
.buttons_inner { display: table-cell; vertical-align: middle; }
.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }
.button_yes { background-image: url("images/yes.gif") }
.button_no { background-image: url("images/no.gif") }

当我用position:absolute添加内部div时，问题是高度不再增加以显示所有文本

<div class="list_item_inner">...
.list_item_inner { position: absolute; height: 100%; }

但是，如果我现在将外部div的最小高度从70更改为200，您可以看到红色框上的100%高度实际上正在工作，因此我的问题是，在第一种情况下没有绝对位置，我需要红色框拉伸，或者在第二种情况下有绝对div，我需要容器拉伸。

HTML:

---

使用js或flexbox模型，这是HTML5的一部分。我想看到问题标题的答案……谢谢，这个想法奏效了，只需做一些其他调整，就可以真正实现我所需要的功能：列表项需要高度设置注：当显示为表格时，最小高度不起作用；增加了垂直对齐：中间至项目按钮；此外，html中不再需要带按钮的div。\u inner。@Inukshuk如果这解决了您的需要，则将其标记为接受，否则进行更改并更新问题。谢谢：

<div class="list_container">
  <div class="list_item">
    <div class="item_text">My text in this item.  This could be a variable length creating a div ranging from about 75-150px in height.  This is a lot of text to make it longer although I am not really saying anything here.  It is only to make the blue box taller than the red box.
    </div>
    <div class="item_buttons">
      <div class="buttons_inner">
        <div class="button button_yes">Y</div>
        <div class="button button_no">N</div>
      </div>
    </div>
  </div>
</div>

.list_container { position: relative; width: 400px; }

.list_item {  border: #000000 solid 1px; display:table; }

.item_text { display:table-cell; width: 340px; background-color: #0066BB }

.item_buttons { display:table-cell; width: 50px; background: #FF0000; }

.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }

.button_yes { background-image: url("images/yes.gif"); }
.button_no { background-image: url("images/no.gif"); }