如果父级高度短，则在父级内创建一个相对子元素

Question

Recently I had a similar SO question with a brilliant answer. However, that answer and that question are not applicable to today's situation. Now the button has text under it. Here is the code: https://jsfiddle.net/Lo4362rk/

button {
  float: right;
  position: relative;
  right: 10%;
  top: 100px;
  max-top: 10px;
  background-color: green;
}
.third-party-block {
  //display: none;
}

and

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

The.third-party-block is dynamic and sometimes it is not displayed. As result, the parent becomes shorter and the button becomes outside of the parent because of top: 100px; The question is how to push the button inside of the parent let's say to the 10px from the top (not from 100px).

Pure CSS solution is needed.

Answer 1

use position:absolute where you can set max-height / min-height and you consider the height with percentage value:

 .parent { position:relative; }.button { position:absolute; right:10%; top:0; height:40%; min-height:30px; max-height:120px; display:flex; flex-direction:column; } button { margin-top:auto; background-color: green; }

 <div style="border:1px solid red;" class="parent"> <div class="button"><button> The main thing in the text is here => </button></div> <p class="third-party-block"> some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here somesome text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some </p> </div> <div style="border:1px solid red;" class="parent"> <div class="button"><button> The main thing in the text is here => </button></div> <p class="third-party-block"> some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here </p> </div> <div style="border:1px solid red;" class="parent"> <div class="button"><button> The main thing in the text is here => </button></div> <p class="third-party-block"> some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes here some text comes </p> </div> <div style="border:1px solid red;" class="parent"> <div class="button"><button> The main thing in the text is here => </button></div> <p class="third-party-block"> some text comes here some text comes here some text comes here some text comes eme text comes here some text comes here some text comes here some text comes </p> </div> <div style="border:1px solid red;" class="parent"> <div class="button"><button> The main thing in the text is here => </button></div> <p class="third-party-block"> some text </p> </div>