Is it possible to force inner element (div.-not-assignable-) to fit the whole content of div.item-wrapper. The style -not-assignable- can't be defined/changed (if there is no solution will use React.clone to assign a proper style in order to solve the issue - just curious about a pure CSS solution).
.container {
display: flex;
border: 1px solid orange;
height: 50px;
}
.item-wrapper {
display: flex;
min-width: 100%;
border: 1px solid green;
}<div class="container">
<div class="item-wrapper">
<div style="border: 1px solid red;" class="-not-assignable-">Div</div>
</div>
</div>You could select -not-assignable- via .item-wrapper > div and use the rule flex-grow:1;:
.container {
display: flex;
border: 1px solid orange;
height: 50px;
}
.item-wrapper {
display: flex;
min-width: 100%;
border: 1px solid green;
}
.item-wrapper>div {
flex-grow: 1;
}<div class="container">
<div class="item-wrapper">
<div style="border: 1px solid red;" class="-not-assignable-">Div</div>
</div>
</div>you can remove display flex from the .item-wrapper
.container {
display: flex;
border: 1px solid orange;
}
.item-wrapper {
min-width: 100%;
border: 1px solid green;
height: 50px;
}<div class="container">
<div class="item-wrapper">
<div style="border: 1px solid red;" class="-not-assignable-">Div</div>
</div>
</div>display:grid instead of flex will do it because you will have the stretch effect on both sides:
.container {
display: flex;
border: 1px solid orange;
height: 50px;
}
.item-wrapper {
display: grid;
min-width: 100%;
border: 1px solid green;
}<div class="container">
<div class="item-wrapper">
<div style="border: 1px solid red;" class="-not-assignable-">Div</div>
</div>
</div>