Сделайте относительный дочерний элемент внутри родителя, если высота родителя мала

Question

Недавно у меня был похожий ТАК вопрос с блестящим ответом. Однако этот ответ и этот вопрос не применимы к сегодняшней ситуации. Теперь кнопка имеет текст под ним. Вот код: https://jsfiddle.net/Lo4362rk/

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

и

<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>

.third-party-block является динамическим и иногда не отображается. В результате родительский элемент становится короче, а кнопка становится за пределами родительского элемента из-за top: 100px;Вопрос заключается в том, как нажать кнопку внутри родительского элемента, скажем, на 10 пикселей сверху (не от 100 пикселей).

Требуется чистое решение CSS.

Answer 1

использовать положение: абсолютное, где вы можете установить max-height / min-height, и вы рассматриваете height с процентным значением:

.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>