0

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, (the child's children,) but at the same time, I want the parent to retain its height of the grandchildren.

I tried making the child to position: absolute, but the problem with that is, the parent doesn't retain the child, and grandchildren's height.

How can I make the parent have the same height as its descendants, while having a different width. And have the child have the same width as the grandchildren?

JSFiddle

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#wrapper {
  background-color: lightblue;
  width: 220px;
}
#innerWrapper {
  display: flex;
  background-color: blueviolet;
}
.item {
  background-color: tomato;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  margin: 5px;
  flex: 1 0 auto;
}
#other {
  background-color: yellow;
  width: 300px;
  height: 250px;
}
<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>
Jessica
  • 9,379
  • 14
  • 65
  • 136

2 Answers2

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>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
0

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

jafarbtech
  • 6,842
  • 1
  • 36
  • 55