How to flex column width similar to table - css

Question

I have a layout similar to table that contains 3 columns.
The first column is 40px，second is auto width by it content, third is the rest available width.
The rows should be highlight when hover, and have click listener.
Tried to use table and grid box layout. But still have some problems.
Table:
table-layout: fixed, can't get the real rest width.
table-layout: auto, can't set max-width of table.
Grid:
wrap cells with row, the column can't be a same width(not align).
unwrap, can't set the row event and style.
So, is there any solution to reslove the problems.
codepen: https://codepen.io/Woody-lxf/pen/dyOQezE
<section style="width:300px">
<main>
<div class="row">
<div class="col1"><input type="checkbox"/></div>
<div class="col2">type: checkbox <br/> value:1111111</div>
<div class="col3">The Description 11111111</div>
</div>
<div class="row">
<div class="col1"><input type="radio"/></div>
<div class="col2">type: radio <br/> value:2</div>
<div class="col3">The Description 22222222222222222222</div>
</div>
</main>
<hr/>
<main class="table">
<div class="tr">
<div class="td1"><input type="checkbox"/></div>
<div class="td2">checkbox <br/> value:1</div>
<div class="td3">The Description 11111111</div>
</div>
<div class="tr">
<div class="td1"><input type="radio"/></div>
<div class="td2">radio <br/> value:2</div>
<div class="td3">The Description 22222222222222222222</div>
</div>
</main>
</section>
main{
background:#f7f7f7;
}
main *{
box-sizing:border-box;
}
.row{
display:grid;
grid-template-columns: 40px minmax(min-content, 40px) auto;
width:100%;
cursor:pointer;
}
.row:hover{
background:#e6e7e8;
}
.row>*{
padding:4px 8px;
white-space:nowrap;
}
.col3, .td3{
overflow:hidden;
text-overflow:ellipsis;
}
.table{
width:100%;
table-layout:fixed;
display:table;
}
.tr{
display:table-row;
cursor:pointer;
}
.tr:hover{
background:#e6e7e8;
}
.tr>*{
display:table-cell;
padding:4px 8px;
white-space:nowrap;
}
.td1{
width:40px;
}

Answer 1

Not 100% sure what you want, but if I understand correctly, it can be done with flex:
<div className="container">
<div className="column1" />
<div className="column2" />
<div className="column3" />
</div>
And css just like this:
.container {
height: 80vh;
width: 80vw;
margin: auto;
display: flex;
padding: 5px;
}
.column1 {
background: lightgreen;
height: 100%;
width: 250px;
}
.column2 {
background: lightcoral;
height: 100%;
}
.column2:hover {
background: lightgreen;
}
.column2:active {
background: yellow;
}
.column3 {
background: lightblue;
height: 100%;
}