时间戳

首页 > 解决方案 > 滚动容器内的 CSS 网格下划线（宽度问题）

html - 滚动容器内的 CSS 网格下划线（宽度问题）

问题描述

在这个例子中，由于某种原因，下划线边框没有跨越容器的整个宽度，如果知道如何修复它，将不胜感激。

.outer-container {
  width: 200px;
  overflow: auto;
}

.grid-container {
  display: grid;
  min-width: 100%;
  width: 100%;
  grid-template-columns: minmax(200px, 3.5fr) minmax(80px, 1fr);
  padding-top: 16px;
  padding-bottom: 16px;
}

.grid-underline {

  border-top: 2px solid green;
  min-width: 100%;
  width: 100%;
}

.item {
  background-color: pink;
}
<div class="outer-container">
  <div class="grid-container">
    <div class="item">helllo</div>
    <div class="item">world</div>
  </div>
  <div class="grid-underline"></div>
</div>

这是一个 JSFiddle 示例：

https://jsfiddle.net/1f9xrsaj/

标签： htmlcsscss-grid

解决方案

.outer-container {
  width: 200px;
  overflow: auto;
}

.grid-container {
  display: grid;
  min-width: 100%;
  width: 100%;
  grid-template-columns: minmax(200px, 3.5fr) minmax(80px, 1fr);
  /*padding-top: 16px;
  padding-bottom: 16px;*/
}

/*.grid-underline {

  border-top: 2px solid green;
  min-width: 100%;
  width: 100%;
}*/

.item {
  background: pink padding-box;
  border-bottom: 16px solid transparent;
  margin-bottom: 1px;
  margin-left: -2px;
  box-shadow: 0 2px 0 -1px green;
}
<div class="outer-container">
  <div class="grid-container">
    <div class="item">helllo</div>
    <div class="item">world</div>
  </div>
  <!-- <div class="grid-underline"></div> -->
</div>

推荐阅读