网格布局列延伸太远

Question

我正在尝试使用网格布局创建两列。右列的宽度是固定的，但左列应该取剩下的。但是，问题在于，当内容太长时，它将扩展左列并在容器中导致水平滚动条。

现在我可以使用其他方法来实现此目的，例如calc，但我正在尝试学习网格布局。

这里有个小提琴来演示：https://jsfiddle.net/pta2c7um/

理想情况下，我希望长标题在尊重网格结构的情况下被截断。

Answer 1

解决方案：

#ticket-viewer .list li{
    /* grid-template-columns: auto 80px; */
    grid-template-columns: minmax(0, 1fr) 80px;
    padding: 1rem;
    cursor: pointer;
}

工作示例：

.list{
  margin: 0;
  padding: 0;
}
.list li {
  padding: 0.8rem 0;
  position: relative;
}
.list li small {
  color: #777777;
}
.list li .content {
  padding: 0 !important;
}
.list li .right-assist {
  text-align: right;
}
.list.left-assist li, .list.right-assist li {
  display: grid;
}
.list.right-assist li {
  grid-template-columns: auto 40px;
}
.list.dividers li:before {
  content: "";
  position: absolute;
  height: 1px;
  background: #CCC;
  bottom: 0px;
  left: 0;
  right: 0;
}
#ticket-viewer{
    border: 1px solid #CCC;
    display: flex;
}
#ticket-viewer .list{
    width: 40%;
  height: 560px;
  overflow-y: auto;
  border-right: 1px solid #CCC;
}
#ticket-viewer .list li{
    /* grid-template-columns: auto 80px; */
  grid-template-columns: minmax(0, 1fr) 80px;
    padding: 1rem;
    cursor: pointer;
}
.truncate {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div id="ticket-viewer">
  <ul class="list right-assist dividers">
    <li data-id="1" class="">
      <div class="content"><span class="truncate">Test</span><small>Bug/Error on Website</small></div>
      <div class="right-assist">Resolved</div>
    </li>
    <li data-id="2" class="active">
      <div class="content"><span class="truncate">This is a very very long subject</span><small>Feature Request</small></div>
      <div class="right-assist">Resolved</div>
    </li>
  </ul>
</div>

说明：

grid-template-columns: minmax(0, 1fr) 80px;分步说明：

1. 定义两列。
2. 最后一个具有固定的80px宽度；
3. 第一个占用剩余空间。

minmax（0，..）用于告诉浏览器缩小列的宽度，如果其内容大于1fr（即剩余空间的一小部分）。

More info on MDN