using absolute element into list item with overflow

Issue

I'm trying to make a card with a badge inside that extends beyond the card, but all the cards inside the parent should scroll horizontally, however I'm running into a problem where my badge element is hidden behind the overflow, which is a problem for me

selector .c: abstract badge

selector .b: abstract card

selector .a: abstract list cards

CSS

        .a {
            width: 150px;
            height: 200px;
            border: solid 1px silver;
            margin: 200px;
            
            /* important */
            display: flex;
            overflow-x: scroll;
        }
        
        .b {
          width: 100px;
          height: 100px;
          border: 1px solid blue;
          
          /* important */
          position: relative;
        }
        
        .c {
            width: 100px;
            height: 100px;
            border: solid 1px red;
            margin-top:-50px;
            
            /* important */
            position: absolute;
        }

HTML

    <div class="a">
        <div class="b">
          <div class="c"></div>
        </div>
        <div class="b">
          <div class="c"></div>
        </div>
    </div>

I solved this problem when I made padding for a list with overflow, but this created another problem in the layout, so I had to abandon this solution

example (its not solution for me)

        .a {
            width: 150px;
            height: 200px;
            border: solid 1px silver;
            margin: 200px;
            
            /* important */
            display: flex;
            overflow-x: scroll;
            
            padding-top: 50px;
        }

.a {
  width: 150px;
  height: 200px;
  border: solid 1px silver;
  margin: 200px;
  /* important */
  display: flex;
  overflow-x: scroll;
}

.b {
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  /* important */
  position: relative;
}

.c {
  width: 100px;
  height: 100px;
  border: solid 1px red;
  margin-top: -50px;
  /* important */
  position: absolute;
}

<div class="a">
  <div class="b">
    card
    <div class="c">badge</div>
  </div>
  <div class="b">
    card
    <div class="c">badge</div>
  </div>
</div>

Solution

I managed to come up with a solution, it doesn't look pretty, but it suits my needs. Apparently overflow: scroll is not at all friendly with positioning and does not allow elements beyond the height of the root element to be visually displayed (in this example it is a card), but if you try to position elements using negative values, then everything will work, because the element is not has absolute position settings and has its own height to which the scroll container is forced to adjust

<style>
.container {
    display: flex;
    width: 400px;
    border: 1px solid red;
    padding: 5px;
    overflow-x: scroll;
}

.card {
    width: 250px;
    height: 200px;
    border: 1px solid blue;
}

.badge {
    margin: auto;
    border: 1px solid green;
    width: 100px;
    height: 50px;
    margin-bottom: -25px;
}
</style>

<div class="container">
    <div class="card-container">
        <div class="badge">
            badge
        </div>
        <div class="card">
            card
        </div>
    </div>
    <div class="card-container">
        <div class="badge">
            badge
        </div>
        <div class="card">
            card
        </div>
    </div>
</div>

Answered By - Андрей Воробьёв