html - CSS grid underline (width issues) inside scrolling container

Question

In this example the underlining border for some reason doesn't span whole width of container, would appreciate any idea how to fix it.

.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>

question from:https://stackoverflow.com/questions/65836775/css-grid-underline-width-issues-inside-scrolling-container

Answer 1

Simply make the container a grid one to have all the elements inside the same column and have the same width:

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

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

.grid-underline {
  border-top: 2px solid green;
}

.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>