当我设置宽度时，子元素消失

Question

我有一个 div 叫做文本框。我想在一个部分之后显示一个箭头。我有4个部分。节 = 2 个字。但是当我为我的 a-text-box 设置宽度时，箭头 disappears.I 真的不知道如何解决这个问题。它应该显示在 '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;
      }
    }
  }
}

Answer 1

尽量不要将 svg 标签用作具有 display: 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>

当我设置宽度时，子元素消失

When i set a width the child element disappear

html

javascript

css

jsx

reactjs