横並びにしたdivを「1つだけ自動伸縮」にし「残りは固定」にして「全体も自動伸縮」にする

  <div class="grid-container">
    <div class="fixed">Fixed</div>
    <div class="flexible">テスト太郎</div>
    <div class="fixed">Fixed</div>
    <div class="fixed">Fixed</div>
  </div>
.grid-container {
  display: grid;
  grid-template-columns: 50px auto 50px 50px; /* 1つ目, 3つ目, 4つ目のdivは固定幅、2つ目のdivは可変幅にします */
  max-width: 500px;
  width: min-content; /* 要素の幅がその内容に合わせて調整されます */
}

.fixed {
  overflow: hidden; /* 必要に応じて、テキストがdivを超えた場合にスクロールできるようにします */
}

.flexible {
  white-space: nowrap; /* 改行を無視して一行に収める */
}
No.2377
08/01 14:50

edit