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 형성