Reputation: 9830
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?
*,
*: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>
Upvotes: 0
Views: 562
Reputation: 7025
Remove the flux-box
from your style and remove the width
in your child. I have added the demo here
Upvotes: 0
Reputation: 44086
OP wanted:
max-width:220px
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.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.
*,
*: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>
Upvotes: 1