Как зафиксировать положение внутри карты bootstrap, когда внешняя часть карты переполнена y?

Question

Так что у меня возникла проблема с фиксированной позицией ...

как исправить заголовок, когда на внешней стороне карты есть переполнение-y auto?

.outer-card{
  padding-right: 20px;
  padding-left: 20px;
  overflow-y: auto;
  display: block;
  padding-bottom: 3px;
}

.card{
  width: 1500px
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-12 col-sm-6 align-items-stretch outer-card">
          <div class="card">
            <div class="card-body text-center select-year-month">
              <div>
                <h5 class="card-title text-left">How to set this title not follow overflow so the title with stay in place while i scroll</h5>
              </div>
              <span>HAHAHAHAHAHA</span>
            </div>
          </div>
        </div>

Answer 1

Заголовок внутри outer-card, вам нужно будет переместить его наружу и добавить div-обертку. Затем вы можете установить абсолютное значение title с помощью div обертки.

Это даст вам желаемое поведение.

Прилагается рабочий фрагмент.

.outer-card{
  padding-right: 20px;
  padding-left: 20px;
  overflow-y: auto;
  display: block;
  padding-bottom: 3px;
}

.card{
  width: 1500px
  }
  
  .container {
    position: relative
  }
  .title{
    position: absolute;
    top: 0px;
    left: 40px;
    max-width: 500px;
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-12 col-sm-6 align-items-stretch outer-card">
          <div class="card">
            <div class="card-body text-center select-year-month">
              <div>

              </div>
              <span>HAHAHAHAHAHA</span>
            </div>
          </div>
        </div>
        <h5 class="card-title text-left title">How to set this title not follow overflow so the title with stay in place while i scroll</h5>
</div>