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

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>

标签： htmlcsscss-gridhorizontal-scrolling

Answer 1

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

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

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

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

但是仍然没有任何改变，因为它的100%宽度与身体的宽度相比。为防止这种情况，请 set.code的父级 ( .code_container) position: relative;。现在因为.code' 的父级是 ' 定位的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>