Can someone explain why my div
with table-layout:fixed
is changing the width of its parent element (body
in this case) to make it 100% when it shouldn't be 100% since it's positioned?
body {
border: 2px solid red;
height: 100vh;
margin:0;
padding: 0;
position: absolute;
}
.c{
display: table;
width: 80%; /* Any percentage value different from 0 */
table-layout:fixed;
outline: 2px solid blue;
}
<div class="c">d</div>
As you can see above, adding table-layout:fixed
forces the body to be full width AND the percentage width
on the div
will work relatively to the width
of the body
!
This is not the case with the below snippet, where the behavior is somehow logical and intuitive:
body {
border: 2px solid red;
height: 100vh;
margin:0;
padding: 0;
position: absolute;
}
.c{
display: table;
width: 80%;
/* table-layout:fixed; */
outline: 2px solid blue;
}
<div class="c">d</div>
How does table-layout:fixed
affect the parent element, which is positioned in this case?
As a side note, using pixel values with width
produces a logical result:
body {
border: 2px solid red;
height: 100vh;
margin:0;
padding: 0;
position: absolute;
}
.c{
display: table;
width: 200px;
table-layout:fixed;
outline: 2px solid blue;
}
<div class="c">d</div>
We can also have some overflow with that strange behavior:
body {
margin:0;
position:relative;
width:300px;
border-top:20px solid green;
}
.container {
border: 2px solid red;
height: 100vh;
position: absolute;
}
.c {
display: table;
width: 120%;
table-layout: fixed;
outline: 2px solid blue;
animation:change 2s linear infinite alternate;
}
@keyframes change {
from{width:1%;}
to {width:150%}
}
<div class="container">
<div class="c">d</div>
</div>