如何防止组件变小？

Question

编辑：当我添加一个新的最小高度（以像素为单位）时，它得到了解决，感谢 Archit！

这里有两个不同的组件在一个 div 中呈现，我不希望组件在更改时变小。我该如何解决？

代码在这里：

 <div class=" flex  shadow-2xl mt-32 bg-white rounded-3xl items-center justify-center mx-16">
          <div class="pt-10">
            <div class="flex ">
              <button
                onClick={() => {
                  setPage(1);
                }}
              >
                <p
                  class={
                    "font-Roboto text-18px ml-6 font-medium text-" +
                    (page === 1 ? "janus-blue" : "kurumsal-gray")
                  }
                >
                  Kurumsal
                </p>
              </button>
              <button
                onClick={() => {
                  setPage(2);
                }}
              >
                <p
                  class={
                    "font-Roboto text-18px ml-4  font-medium text-" +
                    (page === 2 ? "janus-blue" : "kurumsal-gray")
                  }
                >
                  Bireysel
                </p>
              </button>
            </div>
            <div class="flex">
              <div
                class={
                  "h-0.3px  flex-grow bg-" +
                  (page === 1 ? "janus-blue" : "kurumsal-gray")
                }
              ></div>
              <div
                class={
                  "h-0.3px  flex-grow bg-" +
                  (page === 2 ? "janus-blue" : "kurumsal-gray")
                }
              ></div>
            </div>
            <div class="max-w-sign  items-center">{handleSetPage()}</div>
          </div>
        </div>

handlesetpage 通过侦听一个状态来呈现名为 signin 和 signup 的两个不同组件。

Answer 1

如果子组件是绝对位置，那么据我所知，它不应该改变大小。但是如果位置是相对的，您可以通过添加最小宽度和高度以及最大宽度和高度（以像素为单位）来解决问题。除此之外，我没有任何解决方案。