css - 如何通过填充文本来增加 block 顶部的高度？

Question

我的 block 有position:absolute，当内容填充到 block 中时，我无法自动更改高度。
这是示例:http://jsfiddle.net/wwvbvzv4/1/

.outer {
  position: relative;
  min-height: 100px;
  border: 1px dashed #CCC;
  width: 200px;
  float: left;
}
.outer > p {
  
  width: 200px;
  min-height: 150px;
  border: 1px dashed red;
  display: flex;
  vertical-align: bottom;
  align-items: flex-end;
}

<div class="outer">
    <p>
      My text block <br> 
      My text block <br> 
    </p>
</div>

<div class="outer">
    <p>
      My text block <br> 
    </p>
</div>

我需要固定底部位置并通过增加顶部来改变高度。行为应该像这里一样 https://jsfiddle.net/wwvbvzv4/5/而是内联使用绝对

Answer 1

.outer {
            position: relative;
            min-height: 100px;
            border: 1px dashed #CCC;
            width: 200px;
            float: left;
        }
        .outer > p {

            width: 200px;
            background-color: red;
            border: 1px dashed red;
            position: absolute;
            bottom: 0;
        }

<div class="outer">
        <p>
            My text block <br> 
            My text block <br> 
        </p>
    </div>

    <div class="outer">
        <p>
            My text block <br> 
        </p>
    </div>

    <div class="outer">
        <p>
            My text block <br> 
            My text block <br> 
            My text block <br> 
            My text block <br> 
        </p>
    </div>

这是你想要的吗？