网格单元格上 100% 宽度的水平滚动

Question

我想要一个 CSS 网格，在网格的每个单元格内，我想要一个最大尺寸为单元格宽度 100% 的标题。如果标题太长，我想滚动。

这是当前具有正确滚动行为但在长标题上具有固定宽度的外观。我想要的不是固定宽度，而是单元格宽度的 100%（所以灰色块应该和红色框一样长）

codePen：https://codepen.io/vincent2303/pen/ExwZEpW

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 50px;
}

h2 {
  font-size: 2em;
  white-space: nowrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 800px;
  gap: 20px;
}

.box {
  background-color: #e74c3c;
  height: 30vh;
}

.title-wrapper {
  background-color: #bdc3c7;
  width: 300px;
  overflow-x: scroll;
}

<div class=grid>

  <div>
    <div class="title-wrapper">
      <h2>long title, i can scroll---------</h2>
    </div>

    <div class="box"></div>
  </div>

  <div>
    <h2>Short title</h2>
    <div class="box"></div>
  </div>

</div>

有人有这个想法吗？

注意：为了简化代码示例，.grid 类的宽度为 800px，但实际上，它的宽度由其父级定义，我无法预测宽度（我正在研究react app，这段代码将实现一个在多个地方使用的组件，大小不同）。

Answer 1

1fr 解析为minmax(auto, 1fr)，这意味着网格列的最小宽度为min-content，大于1fr。这个问题有一个快速的解决方案，只需将1fr 替换为minmax(0px, 1fr)，这样，父级的宽度被划分为两列，这样你就有了你想要的滚动条。

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 50px;
}

h2 {
  font-size: 2em;
  white-space: nowrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.box {
  background-color: #e74c3c;
  height: 30vh;
}

h2 {
  background-color: #bdc3c7;
  overflow-x: auto;
}

<div class=grid>

  <div>
    <h2>long title, i can scroll----------------------------</h2>
    <div class="box"></div>
  </div>

  <div>
    <h2>Short title</h2>
    <div class="box"></div>
  </div>

</div>

Answer 2

如果您的网格可能包含溢出的内容，则无法使用 1fr，原因如下：

• 1fr 是 minmax(auto, 1fr) 的缩写。
• 当a >= b 为true 时，minmax(a, b) 变为 a（没有任何最小值）。
• 因此，在您的情况下，您的网格的行为就像您将其定义为 grid-template-columns: auto 1fr;，因为对于您的第一列，auto 大于 1fr。

要解决这个问题，您需要告诉网格，当内容变得太宽时，不允许扩展单元格。

使用minmax(0, 1fr) 代替1fr：

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 50px;
}

h2 {
  font-size: 2em;
  white-space: nowrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 800px;
  gap: 20px;
}

.box {
  background-color: #e74c3c;
  height: 30vh;
}

h2 {
  background-color: #bdc3c7;
  overflow-x: scroll;
}

<div class=grid>

  <div>
    <h2>long title, i can scroll------------------ - - - - ----</h2>
    <div class="box"></div>
  </div>

  <div>
    <h2>Short title</h2>
    <div class="box"></div>
  </div>

</div>

Answer 3

如果没有 JavaScript 似乎很难，Dev 他的答案有效，但它涉及固定的最大宽度。

我有一个似乎可行的 JavaScript 解决方案。

    /* Execute when the DOM is loaded, because otherwise the HTML elements might nog be in the DOM. */
    window.addEventListener( 'DOMContentLoaded', () => {

        generateGridItemsWidthVariable()

    } )

    /* Execute when the window is resized, because the width of the boxes might change. */
    window.addEventListener( 'resize', () => {

        generateGridItemsWidthVariable()

    } )

    /* Generate the variable for the grid items. */
    function generateGridItemsWidthVariable() {

        /* Select all the grid items and create an array to loop trough. */
        let gridItems = Array.from( document.getElementsByClassName( 'grid__item' ) )

        /* Loop trough the grid items. */
        gridItems.forEach( gridItem => {

            /* Reset the grid item width, because otherwise the item won't resize. */
            gridItem.style.setProperty( '--grid-item--width', '' )

            /* Get the width of the grid item. */
            let gridItemWidth = gridItem.clientWidth.toString()
            /* Set the width of the grid item as a CSS variable. */
            gridItem.style.setProperty( '--grid-item--width', gridItemWidth + 'px' )

        } )

    }

    * {
        margin: 0;
        padding: 0;
    }

    body {
        padding: 50px;
    }

    h2 {
        font-size: 2em;
        white-space: nowrap;
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        max-width: 800px;
        gap: 20px;
    }

    .grid__item {
        --grid-item--width: 10px;
    }

    .box {
        background-color: #e74c3c;
        height: 30vh;
    }

    .title-wrapper {
        background-color: #bdc3c7;
        width: 100%;
    }
    .title-wrapper h2 {
        max-width: var(--grid-item--width);
        overflow-x: scroll;
    }

<div class=grid >

    <div class="grid__item">
        <div class="title-wrapper" >
            <h2>long title, i can scroll-----------------------</h2>
        </div>

        <div class="box" ></div>
    </div>

    <div class="grid__item">
        <h2>Short title</h2>
        <div class="box" ></div>
    </div>

</div>

Answer 4

这里有一种可能性：

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 50px;
}

h2 {
  font-size: 2em;
  
  white-space: nowrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 800px;
  gap: 20px;
}

.box {
  background-color: #e74c3c;
  height: 50vh;
  max-width: 400px;
}

.title-wrapper {
  background-color: #bdc3c7;
  width: 100%;
  overflow-x: scroll;
}

<div class=grid >

    <div>
    

      <div class="box" >
          <div class="title-wrapper" >
        <h2>long title, i can scroll---------------------------------</h2>
      </div>
      </div>
    </div>

    <div>
    
      <div class="box" >
          <h2>Short title</h2>
      </div>
    </div>

 </div>