在主页而不是轮播部分溢出

Question

我想为移动设备提供一个完全响应的页面，并且我希望它有一个半轮播滑块overflow。 但我在页面而不是轮播部分有水平溢出。
我不想在我的主页上溢出

为什么要对html文档应用溢出？？

调整代码大小，低于 530 像素以显示 overflow

main{
  display: grid;
  grid-template-columns:1fr;
  gap: 2rem;
  border: 2px solid red;
}
section{
  background: gold;
}
.container{
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  gap: 1rem;
}
.box{
  width: 50%;
  flex-shrink: 0;
  padding:2rem;
  background: gray;
}

<main>
  <section>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </section>
  <section>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  </section>
  <section>  <!--  carousel section -->
    <div class="container"> 
      <div class="box">
        <h4>lorem</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae nulla diam in ac </p>
        <div>
          <img src="#" alt="image">
          <div>
            <h4>lorem</h4>
            <p>lorem</p>
          </div>
        </div>
      </div>
      <div class="box">another box</div>
      <div class="box">another box</div>
      <div class="box">another box</div>
    </div>
  </section>
  <section>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </section>
  <section>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  </section>
</main>

Answer 1

您可以通过将列的宽度设置为100% 而不是1fr 来解决它。

通过使用1fr，分数大小将占用最大元素的宽度，在您的情况下，轮播的宽度，这就是它溢出的原因。

main {
  display: grid;
  grid-template-columns: 100%;
  gap: 2rem;
  border: 2px solid red;
}

section {
  background: gold;
}

.container {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  gap: 1rem;
}

.box {
  width: 50%;
  flex-shrink: 0;
  padding: 2rem;
  background: gray;
}

<main>
  <section>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </section>
  <section>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  </section>
  <section class="carousel-section">
    <!--  carousel section -->
    <div class="container">
      <div class="box">
        <h4>lorem</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae nulla diam in ac </p>
        <div>
          <img src="#" alt="image">
          <div>
            <h4>lorem</h4>
            <p>lorem</p>
          </div>
        </div>
      </div>
      <div class="box">another box</div>
      <div class="box">another box</div>
      <div class="box">another box</div>
    </div>
  </section>
  <section>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </section>
  <section>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  </section>
</main>

Answer 2

我将 CSS 网格添加到您的 <section>

section {
    display: grid;
    /* your code*/
}

main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  border: 2px solid red;
}

section {
  background: gold;
  display: grid;
}

.container {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  gap: 1rem;
}

.box {
  width: 50%;
  flex-shrink: 0;
  padding: 2rem;
  background: gray;
}

<main>
  <!-- 1 lorem -->
  <section>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
  <!-- 2 lorem -->
  <section>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</section>

  <!-- 3 -->
  <section>
    <!--  carousel section -->
    <div class="container">
      <!-- 1 box -->
      <div class="box">
        <h4>lorem</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae nulla diam in ac </p>
        <div>
          <img src="#" alt="image">
          <div>
            <h4>lorem</h4>
            <p>lorem</p>
          </div>
        </div>
      </div>

      <!-- 2 box -->
      <div class="box">another box</div>
      <!-- 3 box -->
      <div class="box">another box</div>
      <!-- 4 box -->
      <div class="box">another box</div>
    </div>
  </section>

  <!-- 4 lorem -->
  <section>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
  <!-- 5 lorem -->
  <section>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</section>
</main>

Answer 3

将您的网格更改为 flex 以防止溢出

main{
  display:flex;
  flex-direction: column;
  gap: 2rem;
  border: 2px solid red;
}

Answer 4

我在来自Ahmad Shadeed 的article 中找到了我的问题的完整答案

CSS 网格中的最小内容大小

CSS 网格的子项默认最小内容大小为auto。这意味着，如果有一个元素大于网格项，它将溢出。
为了解决这个问题，我们提供了三种不同的解决方案：

1. 使用minmax()

grid-template-columns: minmax(0, 1fr) 我的问题。

1. 将min-width = 0 应用于网格项
2. 将overflow: hidden 添加到网格项

我将所有三个 sulotions 添加到 sn-p 下面，您可以单独使用每个。

---

main{
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /*  first ssolution */
  gap: 2rem;
  border: 2px solid red;
}
section{
  background: gold;
  min-width: 0; /*  second  ssolution */ 
  overflow: hidden; /*  third  ssolution */
}
.container{
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  gap: 1rem;
}
.box{
  width: 50%;
  flex-shrink: 0;
  padding:2rem;
  background: gray;
}

<main>
  <section>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </section>
  <section>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  </section>
  <section>  <!--  carousel section -->
    <div class="container"> 
      <div class="box">
        <h4>lorem</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae nulla diam in ac </p>
        <div>
          <img src="#" alt="image">
          <div>
            <h4>lorem</h4>
            <p>lorem</p>
          </div>
        </div>
      </div>
      <div class="box">another box</div>
      <div class="box">another box</div>
      <div class="box">another box</div>
    </div>
  </section>
  <section>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </section>
  <section>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  </section>
</main>