¿Es posible forzar el elemento interno (div.-not-assignable-) para que se ajuste a todo el contenido de div.item-wrapper. El estilo, no asignable, no se puede definir/cambiar (si no hay una solución, usará React.clone para asignar un estilo adecuado a fin de resolver el problema, solo curiosidad por una solución CSS pura).
.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>Puede seleccionar -not-assignable- a través .item-wrapper > div y usar la regla 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>puede eliminar la pantalla flexible del .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 en lugar de flex lo hará porque tendrá el efecto de estiramiento en ambos lados:
.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>