Por que o layout da tabela: fixo afeta a largura do elemento pai?

Alguém pode explicar por que meudiv comtable-layout:fixed está alterando a largura do seu elemento pai (body neste caso) para torná-lo 100% quando não deve ser 100%, pois está posicionado?

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>

Como você pode ver acima, adicionartable-layout:fixed força o corpo a ter largura total E a porcentagemwidth nodiv funcionará relativamente aowidth dobody!

Este não é o caso do snippet abaixo, em que o comportamento é de alguma forma lógico e intuitivo:

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>

Comotable-layout:fixed afeta o elemento pai, que está posicionado neste caso?

Como observação lateral, o uso de valores de pixel comwidth produz um resultado lógico:

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>

Também podemos ter um pouco de excesso com issoestranho comportamento:

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>

questionAnswers(3)

yourAnswerToTheQuestion