如何防止组件变小？

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

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