禁用网格元素收缩

Question

我正在做一个宠物项目，但遇到了问题。我需要网格中的两个 div 在移动设备上具有相同的高度，并且我想在它们溢出时添加滚动。但现在上层挤压了下层。我怎样才能解决这个问题？我使用 Tailwind，但我认为这并不重要。谢谢！ 我附上了一张图片以及一个带有 github 和codesandbox 的工作原型。

GitHub 链接

沙盒

Answer 1

您可以考虑：

• 使用

  50%

  应用两个显式网格行轨道，它们是元素高度的

  grid-template-rows

  。
• 将

  min-height: 0

  设置为垂直弹性布局中网格的父级。这让它们收缩到

  min-content

  高度以下。
• 将

  overflow: auto

  或

  overflow-y: auto

  设置为文本容器，以便它们可滚动。

tailwind.config = {
  theme: {
    extend: {
      colors: {
        dark: "#333",
        light: "#FFFAFA",
        primary: {
          100: "#B1D9F2",
          200: "#88B5A2",
          300: "#418393",
        },
      },
      fontFamily: {
        main: ['"Mulish", sans-serif'],
      },
    },
  },
};

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div id="root">
  <div class="font-main bg-primary-300 text-dark w-screen h-screen flex justify-center items-center">
    <div class="w-11/12 h-5/6 bg-primary-100 shadow-lg p-4 rounded-3xl overflow-hidden flex flex-col gap-8 lg:w-4/5 lg:h-4/5 lg:p-6">
      <header class="flex">
        <h1 class="text-lg inline-block uppercase font-bold content-end lg:text-2xl">sinoptik-app</h1>
        <img class="w-12 lg:w-16" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' class='icon' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23F4CE26' d='M492.2 451.6a129.5 129.5 0 1 0 259 0 129.5 129.5 0 1 0-259 0Z'/%3E%3Cpath fill='%23333' d='M621.7 607.4c-85.9 0-155.8-69.9-155.8-155.8s69.9-155.8 155.8-155.8 155.8 69.9 155.8 155.8-69.9 155.8-155.8 155.8zm0-258.9a103.2 103.2 0 0 0 0 206.2 103.2 103.2 0 0 0 0-206.2zM502.1 198a24.7 24.7 0 0 1 33.7 9l24.7 42.7a24.7 24.7 0 0 1-42.7 24.7l-24.7-42.7a24.6 24.6 0 0 1 9-33.7zm305.7 208.4c3.5 13.2 17 21 30.2 17.4l47.6-12.8c13.2-3.5 21-17 17.4-30.2-3.5-13.2-17-21-30.2-17.4l-47.6 12.8a24.7 24.7 0 0 0-17.4 30.2zm-13.2 110.9a24.7 24.7 0 0 0 17.4 30.2l47.6 12.8a24.7 24.7 0 0 0 12.8-47.6l-47.6-12.8a24.8 24.8 0 0 0-30.2 17.4zM665.7 161.8c13.6 0 24.7 11 24.7 24.7v49.3a24.7 24.7 0 1 1-49.4 0v-49.3c0-13.6 11-24.7 24.7-24.7zm167.1 69.5a24.7 24.7 0 0 0-34.9 0L763 266.2a24.7 24.7 0 0 0 0 34.9 24.7 24.7 0 0 0 34.9 0l34.9-34.9a24.6 24.6 0 0 0 0-34.9z'/%3E%3Cpath fill='%23FFF' d='m264.5 740.8-6.5.5c-60.5 3.4-111-49.7-111-111A111 111 0 0 1 270.5 520l-.1-6.9A154.1 154.1 0 0 1 575.9 484 129.5 129.5 0 1 1 597 741.2c-3.5-.1-6.9-.3-10.3-.7l-3.4.1H264.5z'/%3E%3Cpath fill='%23333' d='M252.4 767.8a127 127 0 0 1-87.9-35.8 140.7 140.7 0 0 1-43.9-101.7c0-71.3 54.7-130.2 124.3-136.7a180.8 180.8 0 0 1 179.4-160.9c78.4 0 147 50.6 171.2 123.3h1.4a156 156 0 0 1 84.4 286.9 148.8 148.8 0 0 1-95.1 24.1l-3 .1H265.8l-6.3.5-7.1.2zm5.5-222.1c-46.6 0-84.6 38-84.6 84.6 0 23.8 10 46.9 27.4 63.4a74.1 74.1 0 0 0 55.7 21.2l5.2-.4 2.8-.2h324.9l8.4.6c23.2.8 42.8-8.5 54.9-16.4 29.8-19 47.5-51.4 47.5-86.7a103.3 103.3 0 0 0-120-101.7l-25.4 4.2-4.8-25.3a127.8 127.8 0 0 0-253.2 29.9l1.4 30.9-30.7-3.5c-3.1-.4-6.2-.6-9.5-.6z'/%3E%3C/svg%3E" alt="logo"></header>
      <main class="grow flex flex-col gap-8 min-h-0">
        <div class="p-4 bg-light rounded-lg">
          <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between lg:gap-0"><input class="text-lg h-full border-solid border-2 border-dark rounded-md p-4 outline-none box-border md:text-lg lg:w-2/5 lg:text-2xl" name="search" type="text" value=""><button class="shadow-md p-4 rounded-lg transition-colors duration-300 text-md bg-primary-200 hover:text-light lg:text-lg">get weather information</button></div>
        </div>
        <div class="p-4 bg-light rounded-lg text-xl grow grid grid-cols-1 lg:texl-xl lg:grid-cols-2 max-lg:grid-rows-[repeat(2,50%)] min-h-0">
          <div class="border-b-2 border-dark pb-2 lg:pb-0 lg:pr-4 lg:border-b-0 lg:border-r-2 overflow-auto">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi similique quas dolore nesciunt sint blanditiis odit praesentium, commodi facilis ducimus repellat assumenda numquam expedita quaerat?</p>
          </div>
          <div class="pt-2 border-t-2 border-transparent lg:pt-0 lg:pl-4 lg:border-t-0 lg:border-l-2 overflow-auto">info</div>
        </div>
      </main>
    </div>
  </div>
</div>

.root {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.wrapper {
  background: green;
  width: 80%;
  height: 80%;
}

.parent {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.main {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: repeat(2, 50%);
}

.div1,
.div2 {
  overflow: auto;
}

<div class="root">
  <div class="wrapper">
    <div class="parent">
      <div class="header">
        <p>header</p>
      </div>
      <div class="main">
        <div class="div1">
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias
            maiores ex aut voluptates saepe ea excepturi molestias magnam
            sapiente quasi.Lorem ipsum dolor sit, amet consectetur
            adipisicing elit. Alias maiores ex aut voluptates saepe ea
            excepturi molestias magnam sapiente quasi.Lorem ipsum dolor sit,
            amet consectetur adipisicing elit. Alias maiores ex aut
            voluptates saepe ea excepturi molestias magnam sapiente
            quasi.Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Alias maiores ex aut voluptates saepe ea excepturi molestias
            magnam sapiente quasi.Lorem ipsum dolor sit, amet consectetur
            adipisicing elit. Alias maiores ex aut voluptates saepe ea
            excepturi molestias magnam sapiente quasi.
          </p>
        </div>
        <div class="div2"><p>item</p></div>
      </div>
    </div>
  </div>
</div>