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

问题描述

无法在网格项目内使用水平滚动容器。插入滚动容器时，网格项目的宽度会扩大。即使滚动容器也无法水平滚动。当我为滚动容器定义固定宽度时，只有它可以正常工作，但我希望得到响应的结果。有人可以帮我吗？

这是代码段。

.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,optio
            eos dolorem suscipit commodi.
        </div>

    </div>

解决方法

除非将内容设置为绝对值，否则父div将继续增长以适合其内容大小。这将使您的黑匣子（代码容器）增长。为防止这种情况，请将code_container的子项（.code）的位置设置为absolute。

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

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

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

但是仍然没有任何变化，因为与主体的宽度相比，它的宽度为100%。为防止这种情况，请设置.code的父（.code_container）position: relative;。现在，由于.code的父对象位于relative处，因此代码将计算出100%的宽度相对于.code_container的宽度。

现在，您应该可以进行水平滚动了，并且它可以响应！但是水平滚动条覆盖了内容。因此，给.code_container一个min-height（在您的情况下约为30像素）。

在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,optio eos dolorem suscipit commodi.
  </div>

</div>

,

终于我解决了这个问题。只需在代码容器中包含以下行：

min-width: 0;
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;
            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,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,debitis molestiae explicabo repellat saepe nemo cupiditate nisi. Asperiores dolorem
                    inventore ipsa,repellendus laboriosam aut minus dolore itaque
                    magni incidunt odit porro ipsum. Sequi,esse! At suscipit modi laborum ex aliquam recusandae
                    necessitatibus distinctio,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,optio
            eos dolorem suscipit commodi.
        </div>

    </div>