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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>