Как правильно выровнять div с другим div с помощью полосы прокрутки, чтобы первый div был выровнен по содержимому, исключая полосу прокрутки

Question

У меня есть div, который выровнен вправо. Ниже это еще один div, у которого есть карты. Я хочу, чтобы текст «Добавить» в приведенном выше div был выровнен по правому краю самой правой карты. Конечно, работает хорошо, пока нет прокрутки для карт. Однако при изменении размера браузера таким образом, что справа появляется вертикальная полоса прокрутки, текст больше не выравнивается по правому краю карты.

Что нужно сделать, чтобы текст «добавить» был всегда выровнен по правому краю карты справа, даже если есть полоса прокрутки.

Кроме того, когда пользователь прокручивает страницу вниз, я хочу, чтобы текст «добавления» оставался, а не прокручивался вверх.

HTML:

<div class="search-bar">
  <input type="text" placeholder="Search...">
  <div class="add">
    <p>add new</p>
  </div>
</div>


<div class="cards">
  <div class="card">
    <div class="card-info">
      <p>card 1 header <br /> Line 1 <br /> Line 2 <br /> Line 3 <br /> Line 4 <br /> Line 5 </p>
    </div>
  </div>
  <div class="card">
    <div class="card-info">
      <p>card 2 header <br /> Line 1 <br /> Line 2 <br /> Line 3 <br /> Line 4 <br /> Line 5 </p>
    </div>
  </div>
  <div class="card">
    <div class="card-info">
      <p>card 3 header <br /> Line 1 <br /> Line 2 <br /> Line 3 <br /> Line 4 <br /> Line 5 </p>
    </div>
  </div>
  <div class="card">
    <div class="card-info">
      <p>card 4 header <br /> Line 1 <br /> Line 2 <br /> Line 3 <br /> Line 4 <br /> Line 5 </p>
    </div>
  </div>
  <div class="card">
    <div class="card-info">
      <p>card 5 header <br /> Line 1 <br /> Line 2 <br /> Line 3 <br /> Line 4 <br /> Line 5 </p>
    </div>
  </div>
</div>

CSS:

.search-bar
{
  margin-left: 10px;
  position: relative;
  border-radius: 50%;
  top: 4em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  & input {
    width: 60%;
    min-width: 180px;
    border: solid 0.5px #bababa;
  }
}

.add {
  height: 18px;
  display: grid;
  text-align: right;
}


.cards {
  position: relative;
  top: 5em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: min-content;
  grid-gap: .5rem;
  height: 64vh;
  overflow-y: auto;
}

.card {
  text-align: center;
  margin: 1%;
  min-width: 200px;
  padding: 1%;
  border: 2px solid red;
}

код: https://codepen.io/manajit111/pen/wvKPMWd

Answer 1

Единственное решение, которое я могу придумать CSS, - это включить строку поиска в сетку и использовать позицию слипания, чтобы предотвратить прокрутку текста Add.

.search-bar {
 
  /* position: relative; */
  /* top: 4em; */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: .5rem;
  
  position:sticky;    /* New */
  top:0;              /* New */
  background:white;   /* New */
  grid-column:1 / -1; /* Ensure the search-bar fill the whole row */
  grid-row:1; /* Ensure the search-bar be on the first row, Not really needed since the search-bar is the first child in the DOM tree. */
}

input {
  width: 60%;
  min-width: 180px;
  border: solid 0.5px #bababa;
}



.add {
  display: grid;
  text-align: right;
  border: solid 2px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: min-content;
  grid-gap: .5rem;
  height: 64vh;
  overflow-y: auto;
}
.card {
  text-align: center;
  min-width: 200px;
  padding: 1%;
  border: 2px solid red;
  height:1000px; /* to cause overflow not needed */
}

<div class="cards">
  <div class="search-bar">
    <input type="text" placeholder="Search...">
    <div class="add">
      <p>add new</p>
    </div>
  </div>
  <div class="card">
    <div class="card-info">
      <p>card 1 header <br /> Line 1 <br /> Line 2 <br /> Line 3 <br /> Line 4 <br /> Line 5 </p>
    </div>
  </div>
  <div class="card">
    <div class="card-info">
      <p>card 2 header <br /> Line 1 <br /> Line 2 <br /> Line 3 <br /> Line 4 <br /> Line 5 </p>
    </div>
  </div>
  <div class="card">
    <div class="card-info">
      <p>card 3 header <br /> Line 1 <br /> Line 2 <br /> Line 3 <br /> Line 4 <br /> Line 5 </p>
    </div>
  </div>
  <div class="card">
    <div class="card-info">
      <p>card 4 header <br /> Line 1 <br /> Line 2 <br /> Line 3 <br /> Line 4 <br /> Line 5 </p>
    </div>
  </div>
  <div class="card">
    <div class="card-info">
      <p>card 5 header <br /> Line 1 <br /> Line 2 <br /> Line 3 <br /> Line 4 <br /> Line 5 </p>
    </div>
  </div>
</div>

---

Совет, не используйте процентное значение для отступа / отступа, трудно поддерживать несколько элементов, особенно в сетке, где сетка Родителем предмета является дорожка с изменяющимся размером minmax()