¿Hay alguna manera de hacer que el ancho de un DIV secundario sea más ancho que el DIV primario usando CSS?

¿Hay alguna manera de tener un DIV secundario dentro de un DIV contenedor principal que sea más ancho que el primario? El DIV secundario debe tener el mismo ancho de la ventana gráfica del navegador.

Ver ejemplo a continuación:

El DIV hijo debe permanecer como hijo del padre div. Sé que puedo establecer márgenes negativos arbitrarios en el div hijo para hacerlo más ancho, pero no puedo encontrar la manera de hacerlo esencialmente al 100% del ancho del navegador.

Sé que puedo hacerlo:

.child-div{
    margin-left: -100px;
    margin-right: -100px;
}

Pero necesito que el niño tenga el mismo ancho que el navegador, que es dinámico.

Actualizar

Gracias por sus respuestas, parece que la respuesta más cercana hasta ahora es hacer que la posición DIV secundaria sea absoluta y establecer las propiedades izquierda y derecha en 0.

El siguiente problema que tengo es que el padre tiene position: relative, lo que significa que las propiedades izquierda y derecha siguen siendo relativas al padre div y no al navegador, vea el ejemplo aquí: jsfiddle.net/v2Tja/2

No puedo eliminar la posición relativa del padre sin arruinar todo lo demás.

Usar posicionamiento absoluto

.child-div {
    position:absolute;
    left:0;
    right:0;
}

Aquí hay una solución genérica que mantiene el elemento hijo en el flujo de documentos:

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

Establecemos el widthelemento secundario para llenar todo el ancho de la ventana gráfica, luego hacemos que coincida con el borde de la pantalla moviéndolo a leftuna distancia de la mitad de la ventana gráfica, menos el 50% del ancho del elemento principal.

Manifestación:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;
}

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);

  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;
}

<div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

El soporte del navegador para vw y para calc () generalmente se puede ver como IE9 y más reciente.

Nota: Esto supone que el modelo de caja está configurado en border-box. Sin esto border-box, también tendrías que restar los rellenos y bordes, haciendo que esta solución sea un desastre.

Nota: Se recomienda ocultar el desbordamiento horizontal de su contenedor de desplazamiento, ya que ciertos navegadores pueden optar por mostrar una barra de desplazamiento horizontal a pesar de que no haya desbordamiento.

He buscado por todas partes una solución a este problema durante mucho tiempo. Idealmente, queremos que el hijo sea más grande que el padre, pero sin conocer de antemano las limitaciones del padre.

Y finalmente encontré una brillante respuesta genérica aquí . Copiándolo literalmente:

La idea aquí es: empujar el contenedor hasta el centro exacto de la ventana del navegador con la izquierda: 50% ;, luego jalarlo hacia el borde izquierdo con un margen negativo de -50vw.

.child-div {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Basado en su sugerencia original (configuración de márgenes negativos), he intentado encontrar un método similar usando unidades de porcentaje para el ancho dinámico del navegador:

HTML

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
        </div>
    </div>
</div>

CSS:

.child-div{
   margin: 0 -100%;
   padding: 0 -100%;
}

.parent {
    width: 60%;
    background-color: red;
    margin: 0 auto;
    padding: 50px;
    position:relative;
}

.grandparent {
        overflow-x:hidden;
        background-color: blue;
        width: 100%;
        position:relative;
    }

Los márgenes negativos permitirán que el contenido fluya fuera de la DIV principal. Por lo tanto, configuré padding: 0 100%;para que el contenido vuelva a los límites originales del Chlid DIV.

Los márgenes negativos también harán que el ancho total de .child-div se expanda fuera de la ventana del navegador, lo que resulta en un desplazamiento horizontal. Por lo tanto, debemos recortar el ancho de extrusión aplicando un overflow-x: hiddena un DIV de abuelo (que es el padre de la División de padres):

Aquí está el JSfiddle

Había intentado con Nils Kaspersson left: calc(-50vw + 50%); funcionó perfectamente bien en Chrome y FF (aún no estoy seguro sobre IE) hasta que descubrí que los navegadores Safari no lo hacen correctamente. Espero que hayan solucionado esto pronto, ya que en realidad me gusta este método simple.

Esto también puede resolver su problema donde el elemento DIV principal debe ser position:relative

Los 2 inconvenientes de este método de solución alternativa son:

• Requerir marcado adicional (es decir, un elemento abuelo (al igual que el método de alineación vertical de la buena tabla no es así ...)
• El borde izquierdo y derecho del Child DIV nunca se mostrará, simplemente porque están fuera de la ventana del navegador.

Avíseme si hay algún problema con este método;). Espero eso ayude.

Flexbox se puede usar para hacer que un niño sea más ancho que su padre con tres líneas de CSS.

Solo el niño display, margin-lefty widthnecesita ser configurado. margin-leftDepende del niño width. La formula es:

margin-left: calc(-.5 * var(--child-width) + 50%);

Las variables CSS se pueden usar para evitar calcular manualmente el margen izquierdo.

Demo # 1: Cálculo manual

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
}

.wide {
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;
}

.full {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Demostración n. ° 2: uso de variables CSS

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
  margin-left: calc(-.5 * var(--child-width) + 50%);
  width: var(--child-width);
}

.wide {
  --child-width: 75vw;
}

.full {
  --child-width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Usé esto:

HTML

<div class="container">
 <div class="parent">
  <div class="child">
   <div class="inner-container"></div>
  </div>
 </div>
</div>

CSS

.container {
  overflow-x: hidden;
}

.child {
  position: relative;
  width: 200%;
  left: -50%;
}

.inner-container{
  max-width: 1179px;
  margin:0 auto;
}

Puedes probar posición: absoluta. y dar ancho y alto, arriba: 'eje y desde arriba' e izquierda: 'eje x'

Tuve un problema similar Se suponía que el contenido del elemento secundario debía permanecer en el elemento primario mientras que el fondo tenía que extender el ancho completo de la ventana gráfica.

Resolví este problema creando el elemento hijo position: relativey agregando un pseudo elemento ( :before) con él position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;. El pseudo elemento permanece detrás del elemento secundario real como un pseudo elemento de fondo. Esto funciona en todos los navegadores (incluso IE8 + y Safari 6+, no tienen la posibilidad de probar versiones anteriores).

Pequeño ejemplo de violín: http://jsfiddle.net/vccv39j9/

Agregando a la solución de Nils Kaspersson, también estoy resolviendo el ancho de la barra de desplazamiento vertical. Estoy usando 16pxcomo ejemplo, que se resta del ancho del puerto de vista. Esto evitará que aparezca la barra de desplazamiento horizontal.

width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));

Suponiendo que el padre tiene un ancho fijo, por ejemplo, #page { width: 1000px; }y está centrado #page { margin: auto; }, desea que el niño se ajuste al ancho de la ventana del navegador que simplemente puede hacer:

#page {
    margin: auto;
    width: 1000px;
}

.fullwidth {
    margin-left: calc(500px - 50vw); /* 500px is half of the parent's 1000px */
    width: 100vw;
}

Para que el elemento secundario sea tan ancho como el contenido, intente esto:

.child{
    position:absolute;
    left:0;
    overflow:visible;
    white-space:nowrap;
}

.parent {
    margin:0 auto;
    width:700px;
    border:2px solid red;
}
.child {
    position:absolute;
    width:100%;
    border:2px solid blue;
    left:0;
    top:200px;
}

Sé que esto es viejo, pero para cualquiera que venga a esto por una respuesta, lo haría así:

Desbordamiento oculto en un elemento que contiene el elemento padre, como el cuerpo.

Dele a su elemento hijo un ancho mucho más ancho que su página y colóquelo a la izquierda absoluta en -100%.

Aquí hay un ejemplo:

body {
  overflow:hidden;
}

.parent{
  width: 960px;
  background-color: red;
  margin: 0 auto;
  position: relative;    
}

.child {
  height: 200px;
  position: absolute;
  left: -100%;
  width:9999999px;
}

También aquí hay un JS Fiddle: http://jsfiddle.net/v2Tja/288/

Entonces la solución será la siguiente.

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent{
        width: 960px;
        margin: auto;
        height: 100vh
    }
    .child{
        position: absolute;
        width: 100vw
    }

Probé algunas de tus soluciones. Éste :

margin: 0px -100%;
padding: 0 100%;

es, con mucho, el mejor, ya que no necesitamos CSS adicional para pantallas más pequeñas. Hice un codePen para mostrar los resultados: utilicé un div padre con una imagen de fondo y un divon div con contenido interno.

https://codepen.io/yuyazz/pen/BaoqBBq