使用绝对定位元素将div扩展为文本长度

Question

我试图在列中创建一些容器div,并且其中包含不同长度的段落.

我想将div扩展到正确的高度以允许所有文本,但是当我的元素被设置为时positioned: absolute,我认为它导致了一个问题.

请看我小提琴:http://jsfiddle.net/p7pue2kx/1/

在第一个框中,文本非常适合.但是,当文本更长时,它会溢出并且div容器不会相应地扩展.我想确保有一个最小高度,但最大值由文本大小决定.

有没有更好的方法来进行此定位,这可能允许我的文本扩展容器.

提前致谢.

Answer 1

在不需要使用它的地方不要使用绝对定位:)

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.masterContainer {
  height: 800px;
  background: blue;
  width: 300px;
}
.container {
  position: relative;
  width: 100%;
  background: yellow;
  min-height: 60px;
  margin: 10px 0px;
  padding: 10px;
}
.summary {
  clear: both;
  width: 100%;
  overflow: hidden;
  background: lightblue;
}
.id {
  float: left;
  background: green;
}
.xyz {
  float: right;
  background: red;
}

<div class="masterContainer">
  <div class="container">
    <div class="id">
      KEY / ID
    </div>
    <div class="xyz">ABCD EFGH</div>
    <div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  </div>

  <div class="container">
    <div class="id">
      KEY / ID
    </div>
    <div class="xyz">ABCD EFGH</div>
    <div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>

  <div class="container">
    <div class="id">
      KEY / ID
    </div>
    <div class="xyz">ABCD EFGH</div>
    <div class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>

</div>