Make Parent Div Same Width As Child, And Ignore Parent

I have a parent, child, and grandchildren divs. The grandchildren need to be displayed in rows, not columns. I'm trying to get the child to have the same width as the grandchildren

Solution 1:

UPDATE

OP wanted:

1. grandma at 220px so I gave her max-width:220px
2. mom fitting kids like shrink-wrap extending past grandma. I gave her position:relative to escape grandma's flow, min-width: 635px which is a total of the kids width with margins included, min-height:110px which is the height of a kid plus margins.

3. kids display: inline-block, position: absolute. I then gave them a left of an interval of accumulative values of 105px using this nth selector:

   div div div:nth-of-type(X) {
       left:105px++
   }
   

   See Snippet for a clearer picture.

Mom has a semi-transparent background so you can see grandma in black.

#other was given position:relative and top:110px to move it out of the way.

I think I understand what you are after. In this Snippet, I gave:

1. grandma display:table and table-layout:fixed 2. mom display:table-row 3. kids display:table-cell

I added a dashed border, border-spacing, and a semi-transparent background to show the presence of grandma and mom. Those additions are optional. I removed the flexbox properties as well.

SNIPPET (Revised)

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#wrapper {
  background-color: black;
  max-width: 220px;
  float: left;
}
#innerWrapper {
  background-color: rgba(0, 0, 200, .5);
  display: inline-block;
  position: relative;
  display: flex;
  min-width: 635px;
  min-height: 110px;
}
.item {
  background-color: tomato;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  margin: 5px;
  display: inline-block;
  position: absolute;
}
div div div:nth-of-type(2) {
  left: 105px;
}
div div div:nth-of-type(3) {
  left: 210px;
}
div div div:nth-of-type(4) {
  left: 315px;
}
div div div:nth-of-type(5) {
  left: 420px;
}
div div div:nth-of-type(6) {
  left: 525px;
}
#other {
  background-color: yellow;
  width: 300px;
  height: 250px;
  position: relative;
  top: 110px;
}

<div id="wrapper">
  <div id="innerWrapper">
    <div class="item">Item - 1</div>
    <div class="item">Item - 2</div>
    <div class="item">Item - 3</div>
    <div class="item">Item - 4</div>
    <div class="item">Item - 5</div>
    <div class="item">Item - 6</div>
  </div>
</div>

<div id="other">I'm another element</div>

Solution 2:

Remove the flux-box from your style and remove the width in your child. I have added the demo here