Как сохранить полосу прокрутки вправо, если тело имеет отступы?

Question

Я использую модал с заголовком и компонентом тела. Тело имеет левый и правый отступы для центрирования текста. Тем не менее, это также толкает в полосе прокрутки. Есть ли способ сохранить выравнивание полосы прокрутки вправо при использовании отступа для центрирования основного текста?

 <div className="CoverageInfoModalInnerBox">
            <span className="fa fa-close closeBtn" onClick={onCloseModal} />
            <div className="CoverageInfoModalInnerContent">
              <h3 className="headerText">Basic Coverage Includes</h3>
              <h4 className="subHeaderText">State Minimum Bodily Injury</h4>

              <p className="subText">
                 Some body text
              </p>

</div>

.CoverageInfoModalInnerBox {
    font-family: Lato, sans-serif;
    background-color: $white-color;
    width: 90%;
    padding: 30px 30px 20px;
    margin: auto;
    height: 100%;
    position: relative;
    border: 2px solid rgba(43, 89, 126, 0.5);
  }

.CoverageInfoModalInnerContent {
    height: 100%;
    overflow-y: auto;
  }

Здесь заполнение из .CoverageInfoModalInnerBox выдвигает полосу прокрутки для элемента body. Я хотел бы уметь правильно выравнивать полосу прокрутки тела и при этом использовать отступы. Не уверен, что это возможно.

Answer 1

Вместо того, чтобы устанавливать жесткие значения для отступа, я бы хотел использовать flex для центрирования текста. Кажется, что класс CoverageInfoModalInnerContent является родительским. Я попытался бы добавить следующий код.

.CoverageInfoModalInnerContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Я бы удалил отступы из тела и позволил бы flex сместить его по центру. Также есть ли причина, по которой вы используете свойство className в HTML?