如何在网格项目中使用水平滚动容器？

Question

无法在网格项内使用水平滚动容器。插入滚动容器时，网格项目的宽度会扩大。甚至滚动容器也无法水平滚动。当我为滚动容器定义一个固定宽度时，只有它在工作，但我想要一个响应结果。谁能帮我解决这个问题？

这是代码片段。

.grid-container {
            display: grid;
            grid-template-columns: 1fr 3fr 1fr;
            grid-gap: 10px;
        }

        .grid-container>div {
            border: 2px dotted black;
            padding: 10px;
        }

        .code_container {
            padding: 10px;
            margin: 10px 0;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            background-color: black;
            color: white;
        }

        .code {
            display: inline-block;
        }

<div class="grid-container">

        <div class="left">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
            eos dolorem suscipit commodi.
        </div>

        <div class="main">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorem veniam tempore eius aliquid!
            <div class="code_container">
                <div class="code">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, amet aperiam libero cumque sit quod
                    voluptatem eligendi. Odio illo voluptas beatae omnis voluptatem, ex consectetur vitae error ad,
                    officia iste, debitis molestiae explicabo repellat saepe nemo cupiditate nisi. Asperiores dolorem
                    inventore ipsa, deleniti, consequuntur explicabo, repellendus laboriosam aut minus dolore itaque
                    magni incidunt odit porro ipsum. Sequi, esse! At suscipit modi laborum ex aliquam recusandae
                    necessitatibus distinctio, animi quo? Soluta labore enim fugiat, suscipit cumque facere impedit
                    iusto quaerat neque perspiciatis quas molestiae exercitationem tempora, ad cum obcaecati. Aperiam
                    eos, quae unde provident illum doloribus excepturi optio laudantium quidem nulla!
                </div>
            </div>

        </div>

        <div class="right">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
            eos dolorem suscipit commodi.
        </div>

    </div>

Answer 1

除非内容设置为绝对，parent div 将不断增长以适合其内容大小。这将使您的黑匣子（代码容器）增长。为防止出现这种情况，请将 code_container 的 child(.code) 的定位设置为 absolute.

.code {
   display: inline-block;
   position: absolute;
}

但是现在，代码的内容从代码容器中跳出来了。为防止这种情况，给 .code 一个固定的宽度。在你的情况下，给出 100%.

.code {
    display: inline-block;
    position: absolute;
    width: 100%;
}

但仍然没有任何变化，因为与 body 的宽度相比，它需要 100% 宽度。为防止这种情况，请设置 .code 的 parent (.code_container) position: relative;。现在因为 .code 的 parent 位于 relative，代码将计算它的 100% 宽度相对于 .code_container 的宽度。

现在您应该可以进行水平滚动，而且它是响应式的！但是水平滚动条覆盖了内容。所以给 .code_container 一个 min-height （在你的情况下大约 30px）。

已在 chrome 和 firefox 中测试。工作正常！

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-gap: 10px;
}

.grid-container>div {
  border: 2px dotted black;
  padding: 10px;
}

.code_container {
  padding: 10px 20px;
  margin: 10px 0;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  background-color: black;
  color: red;
  position: relative;
  min-height: 30px;
}

.code {
  display: inline-block;
  position: absolute;
  width: 100%;
}

<div class="grid-container">

  <div class="left">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio eos dolorem suscipit commodi.
  </div>

  <div class="main">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorem veniam tempore eius aliquid!
    <div class="code_container">
      <div class="code">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, amet aperiam libero cumque sit quod voluptatem eligendi. Odio illo voluptas beatae omnis voluptatem, ex consectetur vitae error ad, officia iste, debitis molestiae explicabo repellat saepe
        nemo cupiditate nisi. Asperiores dolorem inventore ipsa, deleniti, consequuntur explicabo, repellendus laboriosam aut minus dolore itaque magni incidunt odit porro ipsum. Sequi, esse! At suscipit modi laborum ex aliquam recusandae necessitatibus
        distinctio, animi quo? Soluta labore enim fugiat, suscipit cumque facere impedit iusto quaerat neque perspiciatis quas molestiae exercitationem tempora, ad cum obcaecati. Aperiam eos, quae unde provident illum doloribus excepturi optio laudantium
        quidem nulla!
      </div>
    </div>

  </div>

  <div class="right">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio eos dolorem suscipit commodi.
  </div>

</div>

Answer 2

终于解决了这个问题。只需要在容器中包含这些行：

min-width: 0;
overflow: auto;

        .grid-container {
            display: grid;
            grid-template-columns: 1fr 3fr 1fr;
            grid-gap: 10px;
        }

        .grid-container>div {
            border: 2px dotted black;
            padding: 10px;
            /* Auto scroll horizontally */
            min-width: 0;
            overflow: auto;
        }

        .code_container {
            padding: 10px;
            margin: 10px 0;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            background-color: black;
            color: white;
        }

        .code {
            display: inline-block;
        }

<div class="grid-container">

        <div class="left">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
            eos dolorem suscipit commodi.
        </div>

        <div class="main">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorem veniam tempore eius aliquid!
            <div class="code_container">
                <div class="code">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, amet aperiam libero cumque sit quod
                    voluptatem eligendi. Odio illo voluptas beatae omnis voluptatem, ex consectetur vitae error ad,
                    officia iste, debitis molestiae explicabo repellat saepe nemo cupiditate nisi. Asperiores dolorem
                    inventore ipsa, deleniti, consequuntur explicabo, repellendus laboriosam aut minus dolore itaque
                    magni incidunt odit porro ipsum. Sequi, esse! At suscipit modi laborum ex aliquam recusandae
                    necessitatibus distinctio, animi quo? Soluta labore enim fugiat, suscipit cumque facere impedit
                    iusto quaerat neque perspiciatis quas molestiae exercitationem tempora, ad cum obcaecati. Aperiam
                    eos, quae unde provident illum doloribus excepturi optio laudantium quidem nulla!
                </div>
            </div>

        </div>

        <div class="right">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
            eos dolorem suscipit commodi.
        </div>

    </div>

如何在网格项目中使用水平滚动容器？

How to use Horizontal scroll container inside a grid item?

html

css

horizontal-scrolling

css-grid