使用 CSS 网格时防止内容溢出

问题描述 投票：0回答：1

𝐓𝐡𝐞𝐫𝐞𝐜𝐮𝐫𝐫𝐞𝐧𝐭𝐩𝐫𝐨𝐛𝐥𝐞𝐦𝐈𝐤𝐞𝐞𝐩𝐟𝐚𝐜𝐢 𝐧𝐠:

我有一个主容器，里面嵌套了 2 个 div（我们称它们为左和右）。 CSS 网格应用于主容器，为其提供 2 列，两列大小相等 (1fr)。

通常情况下，CSS 网格应该根据可用大小的大小来增大和缩小，但是当我将内容添加到“𝘭𝘦𝘧𝘵”和“𝘳𝘪𝘨𝘩𝘵”中时，它会阻止网格在某个点缩小并且内容溢出。

Content overflowing a CSS Grid 𝐇𝐨𝐰𝐝𝐨𝐈𝐟𝐢𝐱𝐢𝐭？

为了解决这个问题，我在指定“𝘭𝘦𝘧𝘵”和“𝘳𝘪𝘨𝘩𝘵”中所有单个元素的大小和宽度时使用了相对单位，以便元素可以根据分配的大小缩小和增长，但我仍然面临上述问题。 

body {
  font-family: 'Space Mono', monospace;
  background-color: hsl(185, 41%, 84%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.logo {
  margin-bottom: 3em;
}

main {
  width: 70%;
  height: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  background-color: white;
  border-radius: 1.2rem;
  padding: 2em;
}


/*Left main*/

label {
  font-size: 1rem;
  color: #5E7A7D;
}

input {
  border: none;
  background-color: #F3F9FA;
  font-weight: 800;
  font-size: 1.5rem;
  color: #00474B;
  padding: 0.2rem 1rem;
  width: 90%
}

.btn-cntr {
  display: grid;
  grid-template: 0.3fr 0.3fr/ 0.2fr 0.2fr 0.2fr;
  gap: 10px;
}

button {
  width: 90%;
  background-color: hsl(183, 100%, 15%);
  border: none;
  border-radius: 0.2rem;
  padding: 0.5em 0.9em;
  font-size: 1.5rem;
  color: white;
}

.custom {
  background-color: #F3F9FA;
  color: #547878;
  font-size: 1.5rem;
}


/*Right main*/

.right {
  display: flex;
  flex-direction: column;
  height: 80%;
  border-radius: 1.2rem;
  padding-left: 1em;
  background-color: hsl(183, 100%, 15%);
  color: white;
  font-size: 1rem;
}

.small-text {
  font-size: 0.9rem;
  font-weight: 800;
  color: #7F9D9F;
}

.amount {
  color: hsl(172, 67%, 45%);
  font-size: 3rem;
  margin: 0px;
  flex-shrink: 1;
}

.reset-btn {
  font-size: 1.2rem;
  text-transform: uppercase;
  color: hsl(183, 100%, 15%);
  background-color: hsl(172, 67%, 45%);
}

.total-sum {
  display: flex;
}
<body>
  <img src="./images/logo.svg" class="logo" alt="logo: word splitter">
  <main>
    <section class="left">
      <label for="Bill">Bill</label>
      <br>
      <input type="text" id="Bill" placeholder="$">

      <p>Select Tip %</p>
      <div class="btn-cntr">
        <button class="percentage">5%</button>
        <button class="percentage">10%</button>
        <button class="percentage">15%</button>
        <button class="percentage">25%</button>
        <button class="percentage">50%</button>
        <button class="percentage custom">Custom</button>
      </div>

      <label for="n-pple">Number of People</label>
      <br>
      <input type="text" id="n-pple" placeholder="">
    </section>

    <section class="right">
      <div class="total-sum">
        <p>Tip Amount / person</p>
        <p class="amount">Total </p>
      </div>

      <div class="total-sum">
        <p>Total / person</p>
        <p class="amount"> TotalS</p>
      </div>
      <button class="reset-btn">Reset</button>
    </section>
  </main>
</body>

html css responsive-design
1个回答
0
投票

一些小的调整就能让你继续前进。主要问题是您需要专栏中的内容具有响应能力。但在某些时候，您还需要从两列切换到单列。

body {
  font-family: 'Space Mono', monospace;
  background-color: hsl(185, 41%, 84%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.logo {
  margin-bottom: 3em;
}

main {
  width: 70%;
  display: grid;
  grid-template-columns: auto;
  column-gap: 3rem;
  background-color: white;
  border-radius: 1.2rem;
  padding: 2em;
}

@media (min-width: 600px) {
  main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*Left main*/

label {
  font-size: 1rem;
  color: #5E7A7D;
}

input {
  border: none;
  background-color: #F3F9FA;
  font-weight: 800;
  font-size: 1.5rem;
  color: #00474B;
  padding: 0.2rem 1rem;
  width: 90%
}

.btn-cntr {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

button {
  min-width: 4em;
  background-color: hsl(183, 100%, 15%);
  border: none;
  border-radius: 0.2rem;
  padding: 0.5em 0.9em;
  font-size: 1.5rem;
  color: white;
}

.custom {
  background-color: #F3F9FA;
  color: #547878;
  font-size: 1.5rem;
}


/*Right main*/

.right {
  display: flex;
  flex-direction: column;
  height: 80%;
  border-radius: 1.2rem;
  padding-left: 1em;
  background-color: hsl(183, 100%, 15%);
  color: white;
  font-size: 1rem;
}

.small-text {
  font-size: 0.9rem;
  font-weight: 800;
  color: #7F9D9F;
}

.amount {
  color: hsl(172, 67%, 45%);
  font-size: 3rem;
  margin: 0px;
  flex-shrink: 1;
}

.reset-btn {
  font-size: 1.2rem;
  text-transform: uppercase;
  color: hsl(183, 100%, 15%);
  background-color: hsl(172, 67%, 45%);
}

.total-sum {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2em;
}
<body>
  <img src="./images/logo.svg" class="logo" alt="logo: word splitter">
  <main>
    <section class="left">
      <label for="Bill">Bill</label>
      <br>
      <input type="text" id="Bill" placeholder="$">

      <p>Select Tip %</p>
      <div class="btn-cntr">
        <button class="percentage">5%</button>
        <button class="percentage">10%</button>
        <button class="percentage">15%</button>
        <button class="percentage">25%</button>
        <button class="percentage">50%</button>
        <button class="percentage custom">Custom</button>
      </div>

      <label for="n-pple">Number of People</label>
      <br>
      <input type="text" id="n-pple" placeholder="">
    </section>

    <section class="right">
      <div class="total-sum">
        <p>Tip Amount / person</p>
        <p class="amount">Total </p>
      </div>

      <div class="total-sum">
        <p>Total / person</p>
        <p class="amount"> TotalS</p>
      </div>
      <button class="reset-btn">Reset</button>
    </section>
  </main>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.