<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; /* 改行を無視して一行に収める */
}