safari flexItem element text wrapped

[p-iknow]

이슈

• 사파리의 경우 flex item 의 text 크기가 shrink 되는 현상이 있다.
• 기대하는 효과를 넓게 퍼져야 한다.
  

   <div className={cx("get-point")} onClick={this.ROUTE.goRecommend}>
          <div className={cx("point_link")}>
            <span className={cx("point_link__text")}>
              {parser(`로렘렘렘 <b>로렘렘 로렘렘</b> 로렘로렘,<b> 로렘렘</b> 로렘!`)}
            </span>
          </div>
        </div>
      </div>

• css 이슈

   .point_link {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      height: 40px;
      text-align: center;
      font-size: 14px;
      color: white;
      background-image: linear-gradient(275deg, #8aa1d4 74%, #6c6c80 100%);

      &__text {
        // display: block;

        margin-left: -20px;
        &:before {
          content: "";
          vertical-align: middle;
          margin-top: -7px;
          display: inline-block;
          width: 51px;
          height: 36px;
          background: url(//res.tutoring.co.kr/res/images/pay/point/img_coffee_bnr.png?)
            no-repeat;
          background-size: 100%;
        }
      }

      @media screen and (max-width: 359px) {
        &__text {
          margin-left: 0;
          &:before {
            content: none;
          }
        }
      }
    }
  }

의심가는 사항들

• flex item 내부의 block 속성
• flex item 내부의 새로운 BFC 형성