When i set a width the child element disappear-CodePudding

I have a div called a-text-box. And i want to display an arrow after a section. I have 4 sections. Section = 2 words. But when i set a width for my a-text-box, the arrow disappears.I dont really know how to fix that. The arrow it's supposed to be displayed after 'Jonathan'.

JSX:

  return (
    <Transitions>
      <div className={styles.about}>
        <h1>Who am I?</h1>
        <div className={styles["a-container"]}>
          <Undraw1 class={styles.svg} />
          <div className={styles["a-text__box"]}>
            <Element text="Name" text2="Jonathan" />
            <BsFillArrowRightCircleFill className={styles.arrow} />
            <Element text="Age" text2="18" />
            <Element text="Nationality" text2="Brazilian" />
            <Element text="Experience" text2="Junior" />
          </div>
        </div>
        <Btn name="Details" class={styles.btn} />
      </div>
    </Transitions>
  );

CSS:

@media (max-width: 992px) {
  .a-container {
    width:90%;
    .svg{
      transform:scale(0.8);
    }
    .a-text__box {
     width:40%;
      display: flex;
      background-color: var(--primary-color);
      border-radius: 27px;
      align-items: center;
      overflow: scroll;

      div {
        margin-inline: 20%;
        align-items:center;
        font-size: 2rem;
        display: flex;
        flex-direction: column;

        .arrowRight {
          display: none;
        }
        .space {
          display: none;
        }
      }

      .arrow {
        display: block;
      }
    }
  }
}

CodePudding user response：

Try to not use svg tag as direct child of an element with diplay: flex;

<div className={styles["a-text__box"]}>
  <Element text="Name" text2="Jonathan" />
  <span>
    <BsFillArrowRightCircleFill className={styles.arrow} />
  </span>
  <Element text="Age" text2="18" />
  <Element text="Nationality" text2="Brazilian" />
  <Element text="Experience" text2="Junior" />
</div>