Invalid table cell size for children.
I am trying to stretch the child div to the full height of the parent using display: table-cell
for the child, but I want the child's width to stay in the container and the child to ignore the width property and always be 100% of the width.
I tried to add table-layout: fixed
to parent by setting max-width: 100px
to child, but it doesn't seem to affect the child div.
I have the following layout:
<div class="parent">
<div class="child">
//Content Here
</div>
</div>
And the following CSS
.parent {
display: table;
width: 100%;
}
.child {
display: table-cell;
width: 100px;
}
Example: Fiddle
************** UPDATE **************
I was able to achieve the desired behavior using display: flex and flex-direction: column on.parent and flex: 1 on .child, however I'm not sure if this is the best solution due to browser compatibility.
See the updated Fiddle
source to share
add grand-child div
Here's a snippet:
.parent {
display: table;
width: 100%;
background: blue;
min-height: 500px;
}
.child {
display: table-cell;
padding: 5% /* demo */
}
.grand-child {
background: white;
width: 100px;
}
<div class="parent">
<div class="child">
<div class="grand-child">Blue Background not visible due to .child taking width 100%</div>
</div>
</div>
UPDATE (based on OP's comment)
Thanks, but then the div / child-child is not full height parent
So here is the explanation / Solution:
Explanation:
min-height
does not apply to table elements
In CSS 2.1, the impact
min-width
andmax-width
to the table, built-in tables, table cells, columns, columns and groups undefined columns.
From MDN :
Used for all elements but not replaced inline elements, table columns, and column groups
So, you can replace min-height
with height
, because it is table
always stretched.
Decision:
/* Both Single and Multiple Cells */
.parent {
display: table;
box-sizing:border-box; /*see vendor-prefixes */
width: 100%;
background: blue;
height: 500px;
}
.child {
display: table-cell;
}
.child .parent{
width: 100px;
background: white;
}
/* Multiple "Cells" extra */
/*if you want to have more than one .child.parent display in same .row either you set them float:left or .display:inline-block (maybe with some margin-left/right) - added multiple justfor demo puposes */
.parent .multiple {
float:left;
margin-right:6%;
}
<h1> single "Cell" </h1>
<hr />
<div class="parent">
<div class="child">
<div class="parent">Blue Background not visible due to .child taking width 100%</div>
</div>
</div>
<!--
HOW THIS CODE WORKS:
<table> // parent
<tr> -- ommited in the code above --
<td> //child
<table> // child parent
</table>
</td>
</tr>
</table>
-->
<h1> Multiple "Cells" </h1>
<hr />
<div class="parent">
<div class="child">
<div class="parent multiple">Blue Background not visible due to .child taking width 100%</div>
<div class="parent multiple">Blue Background not visible due to .child taking width 100%</div>
<div class="parent multiple">Blue Background not visible due to .child taking width 100%</div>
</div>
</div>
<!--
HOW THIS CODE WORKS:
<table> // parent
<tr> -- ommited in the code above --
<td> //child
<table> // child parent
</table>
<table> // child parent
</table>
<table> // child parent
</table>
</td>
</tr>
</table>
-->
source to share