No se puede hacer el ancho de DIV al 100% con la barra de desplazamiento

Tengo una página con un DIV y una TABLA. El DIV es mi encabezado y quiero que tenga un ancho del 100%, incluso cuando se muestre la barra de desplazamiento horizontal. Por alguna razón, solo toma el 100% de la ventana visible.

Mi código HTML es:

   
100% DIV
Very_Long_Header_1 Very_Long_Header_2 Very_Long_Header_3

Cuando me desplazo hacia la derecha, el DIV no utiliza todo el ancho:

¿Cómo puedo hacer que el DIV tome el 100% del ancho de página? Idealmente, no quiero cambiar la TABLA porque es un código generado.

No hay forma (perfectamente dinámica, sin corregir anchuras, y con CSS puro, sin JavaScript) de obtener un elemento de nivel de bloque para heredar el ancho de un elemento de nivel de bloque hermano a través de un elemento primario de nivel de bloque.

La solución alternativa es display: inline-block en el elemento primario, ya que un bloque en línea calcula su propiedad de width desde su hijo más ancho.

En su caso, no coloque la display: inline-block en display: inline-block en el elemento del body . Sugeriría envolver tus elementos 100% div y table en otro elemento contenedor, así:

 < !DOCTYPE html>   
100% DIV
Very_Long_Header_1 Very_Long_Header_2 Very_Long_Header_3

En realidad table etiqueta de la table se está desbordando, así que intenta darle el 100% a su padre y al div también. Si no funciona, proporcione una url jsfiddle