Início / user-2606634

t.schoel's questions

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

Em uma linha de grade com três trilhas, gostaria que as trilhas esquerda e direita tivessem exatamente o mesmo tamanho, respeitando o maior conteúdo mínimo entre as duas, e que a trilha do meio ocupasse o espaço restante, independentemente do tamanho do seu conteúdo. O HTML+CSS a seguir ilustra o problema:

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;descreve bem o que eu quero alcançar, mas não funciona. Em vez disso, como 1fré essencialmente equivalente ao minmax(auto, 1fr)que outros já observaram em outros lugares, as trilhas de borda são reduzidas a 0 de largura e a trilha do meio ocupará todo o espaço. Algo como grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);produz um resultado um pouco melhor, mas também não é o que eu quero, porque reduzirá as bordas para min-content, o que é diferente para cada uma delas, ou seja, elas não terão a mesma largura.

css