我想更改组件的样式以适应内容，我的组件Plan.vue：

<template>
  <div class="plan">
    <div id="planFlex">
      <font-awesome-icon icon="fa-solid fa-user fa-xl" />
      <font-awesome-icon icon="fa-solid fa-arrow-left fa-xl" />
      <h1>Plan</h1>
      <font-awesome-icon icon="fa-solid fa-arrow-right fa-xl" />
      <font-awesome-icon icon="fa-solid fa-robot fa-xl" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Plan"
  };
</script>

<style>
@import "../css/Plan.css";
</style>

我样式表Plan.css：

#planFlex {
  display: flex;
  justify-content: space-between;
  padding: 5px;
}

.fa-user {
  color: white;
}

.fa-robot {
  color: white;
}

.fa-arrow-right {
  color: white;
  position: relative;
  padding-left: 80px;
}

.fa-arrow-left {
  color: white;
  padding-right: 80px;
}

#planFlex h1 {
  text-align: center;
  margin: 0px;
  color: antiquewhite;
}

#planFlex h1:hover {
  cursor: pointer;
}

#planFlex h2 {
  margin: 0px;
  padding-left: 3%;
  color: white;
}

我试着添加flex-shrink: 1和width: fit-content到我的样式表，但它不适合我，你能告诉我如何让我的设计响应吗？提前感谢。