将相对定位的子项保留在父块中所需的最大-最大等值

Question

有一个html代码https://jsfiddle.net/1t68bfex/

<div style="border:1px solid red;">
  <button>
   The text from the left is beautiful
  </button>
  <div class="third-party-block">
     <p>
     some text comes here
     </p>
     <p>
     some text comes here
     </p>
     <p>
     some text comes here
     </p>
     <p>
     some text comes here
     </p>   
  </div>
</div>

CSS：

button {
  position: relative; 
  top: 100px;
  left: 150px;
  max-top: 10px;
}
.third-party-block {
  //display: none;
}

这里的问题是第三部分是动态的，如果未显示，按钮显示将停留在顶部附近，如果父级的高度太短，应更改顶部：100px。

所以，我正在寻找类似max-width的宽度，但是对于我的情况相同。 纯CSS解决方案是必需的。