網格單元格寬度為100%的水平滾動

* {
  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的寬度為在不同大小的多個地方使用）。

uj5u.com熱心網友回復：

如果您的網格可能包含溢位的內容，則無法使用1fr，原因如下：

• 1fr只是 的縮寫minmax(auto, 1fr)。
• minmax(a, b)a當a >= bis時變為（沒有任何 minmax）true。
• 因此，在您的情況下，您的網格的行為就像您已將其定義為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>

uj5u.com熱心網友回復：

正如這里評論的一種可能性：

* {
  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>

uj5u.com熱心網友回復：

沒有 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>

uj5u.com熱心網友回復：

Well1fr決議為minmax(auto, 1fr)，這意味著網格列的最小寬度為min-content，即大于1fr。這個問題有一個快速的解決方案，只需將其替換1fr為minmax(0px, 1fr)，這樣，父級的寬度就被分為 2 列，這樣您就可以隨心所欲地獲得滾動條。

* {
  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>

標籤：html css 前端

上一篇：如果我在原始按鈕內有一個跨度來觸發下拉選單，則下拉選單不起作用

下一篇：如何更改HTML中表格行的高度？