Css grid: area width expand over 100% - html

Question

I have a CSS grid, and my problem is, that one of the container widths expand over 100%.
I understand it expands because of the content is larger, but I would like to stay 100%.
Why I need this: Because one field (witch course the problem) I would like to shrink with CSS calc. Problem is that the parent width percentage browser calculates before calc function in the child. This way, even though the field is small at the end when the content size of a parent is calculated is big.
.parent {
grid-area: info_panel;
z-index: 1000;
background-color: $color-card-background;
margin: 0.4rem;
margin-bottom: 1rem;
padding: 0.9rem;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
border-radius: 1rem;
}
child {
display: inline-flex;
justify-content: space-between;
width: 100%;
margin-bottom: 1rem;
}
sub-child { // this is the problem
display: inline-block;
max-width: calc(100% - 20rem);
}
EDIT
.index-page{
display: grid;
justify-content: stretch;
justify-items: stretch;
box-sizing: border-box;
overflow: hidden;
grid-template-columns: 12rem auto;
grid-template-rows: calc(100vh - 50px - 17rem) 17rem;
grid-template-areas: "left_panel right_panel "
"left_panel info_panel ";
}
.panel__left {
background-color: blue;
overflow: scroll;
grid-area: left_panel;
}
.panel__right {
background-color: red;
grid-area: right_panel;
grid-column: right_panel-start / right_panel-end;
grid-row: right_panel-start / info_panel-end;
}
.panel__info {
grid-area: info_panel;
z-index: 1000;
background-color: white;
margin: 0.4rem;
margin-bottom: 1rem;
padding: 0.9rem;
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
border-radius: 1rem;
}
.panel__info__top {
display: inline-flex;
justify-content: space-between;
width: 100%;
margin-bottom: 1rem;
}
.panel__info__top__titles {
display: inline-block;
max-width: calc(100% - 17rem);
}
.panel__info__top__buttons {
display: inline-block;
padding-right: 1.4rem;
}
.row_info_text {
padding-left: 1.4rem;
padding-right: 0.7rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
line-height: 120%
}
.icon_button {
width: 3rem;
height: 3rem;
margin: 1rem;
vertical-align: top;
background-color: transparent;
border: none;
}
.icon_button span {
margin: auto;
text-align:center;
font-size: 2.2rem;
color: $color-theme-main;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<div class="index-page">
<div class="panel__left"></div>
<div class="panel__right"></div>
<div class="panel__info">
<div class="panel__info__top">
<div class="panel__info__top__titles">
<div class="row_info_text "><b>Small text</b></div>
<div class="row_info_text">Long text that ruin my layout, because is too long. Long text that ruin my layout, because is too long.Long text that ruin my layout, because is too long.Long text that ruin my layout, because is too long. It is tooooo long</div>
<div class="row_info_text">small text</div>
</div>
<div class="panel__info__top__buttons">
<button class="icon_button"><span class="material-icons">assignment_turned_in_outlined</span></button>
<button class="icon_button"><span class="material-icons">perm_phone_msg</span></button>
<button class="icon_button"><span class="material-icons">accessibility</span></button>
</div>
</div>
</div>
</div>

Answer 1

grid-template-columns: repeat(2, 12rem, 1fr);
that line should clear up your problem.