主页 / user-2606634

t.schoel's questions

Martin Hope
t.schoel
Asked: 2025-04-29 00:49:33 +0800 CST
  • 5

在一个包含三条轨道的网格行中，我希望左右轨道大小完全相等，同时保留两者中较大的 min-content 值，并且让中间轨道占据剩余空间，无论其内容大小如何。以下 HTML+CSS 代码演示了这个问题：

nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr); */
  background: green;
  align-items: center;
  overflow: hidden;
}

.box {
  box-sizing: border-box;
  overflow: hidden;
}

.scroll-container {
  position: relative;
}

ul {
  display: flex;
  border: 1px solid black;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  position: relative;

  li {
    padding: 8px 16px;
    white-space: nowrap;

    &:not(:last-child) {
      border-inline-end: 1px solid black;
    }
  }

}

.edge {
  padding: 8px;
  white-space: nowrap;
}

.right {
  justify-self: end;

}
<nav>
  <div class="box edge left">
    <h3 class="title">Super Cool App</h3>
  </div>

  <div class="box centre">

    <div class="scroll-container">
      <ul class="links">
        <li>First Link Item</li>
        <li>Second Link Item</li>
        <li>Third Link Item</li>
        <li>Fourth Link Item</li>
        <li>Fifth Link Item</li>
        <li>Sixth Link Item</li>
        <li>Seventh Link Item</li>
        <li>Eighth Link Item</li>
        <li>Ninth Link Item</li>
        <li>Tenth Link Item</li>
      </ul>
    </div>

  </div>
  <div class="box edge right">
    <button>X</button>
  </div>
</nav>

grid-template-columns: 1fr auto 1fr;某种程度上很好地描述了我想要实现的目标，但却行不通。相反，正如其他人在其他地方提到的1fr那样minmax(auto, 1fr)，边缘轨道的宽度会减小到 0，而中间轨道会占据整个空间。类似于 的方法grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);虽然效果会稍微好一些，但也不是我想要的，因为它会将边缘减小到min-content，而每个边缘的宽度都不同，也就是说，它们的宽度不会相等。

css