Fit the content of container

user_1148770 0
Viewed 51

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>

css html javascript
3 Answers

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>

user_6164430

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>

user_49669810

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>

user_86203330
Related