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

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

Vea el ejemplo a continuación:

El niño DIV deber permanecer como un hijo de la división principal. Sé que puedo establecer márgenes negativos arbitrarios en el div secundario 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 el niño sea DIV. position: absolutey establezca las propiedades izquierda y derecha en 0.

El siguiente problema que tengo es que el padre tiene position: relativelo que significa que las propiedades izquierda y derecha aún son relativas al div principal y no al navegador, vea el ejemplo aquí: jsfiddle.net/v2Tja/2

no puedo quitar el position: relative del padre sin arruinar todo lo demás.

Aquí hay una solución genérica que mantiene el elemento secundario en el flujo del documento:

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

Configuramos el width del elemento secundario para llenar todo el ancho de la ventana gráfica, luego hacemos que se encuentre con el borde de la pantalla moviéndolo hacia el left por una 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>

Soporte de navegador para volvo y para calcular() generalmente se puede ver como IE9 y más reciente.

Nota: Esto supone que el modelo de caja está configurado para border-box. Sin border-boxtambién tendría que restar rellenos y bordes, lo que haría que esta solución fuera 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.

Usar posicionamiento absoluto

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

He buscado por todas partes una solución a este problema durante mucho tiempo. Lo ideal sería que el hijo fuera mayor que el padre, pero sin conocer de antemano las limitaciones del padre.

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

La idea aquí es: empujar el contenedor hasta el centro exacto de la ventana del navegador con la izquierda: 50 %; luego, tirar de él 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;
}

Según su sugerencia original (establecer márgenes negativos), probé y encontré 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 del DIV principal. Por eso puse el padding: 0 100%; para hacer retroceder el contenido 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 gráfica del navegador, lo que dará como resultado un desplazamiento horizontal. Por lo tanto, necesitamos recortar el ancho de extrusión aplicando un overflow-x: hidden a un DIV abuelo (que es el padre del Div principal):

Aquí está el JSfiddle

He probado el de Nils Kaspersson left: calc(-50vw + 50%); funcionó perfectamente bien en Chrome y FF (todavía no estoy seguro acerca de IE) hasta que descubrí que los navegadores Safari no lo hacen correctamente. Espero que solucionen esto pronto, ya que realmente 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 alternativo son:

• Requerir marcado adicional (es decir, un elemento abuelo (al igual que el buen método de alineación vertical de la tabla, ¿no?)
• Los bordes izquierdo y derecho del Child DIV nunca se mostrarán, simplemente porque están fuera de la ventana gráfica del navegador.

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

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

Solo la del niño display, margin-left y width necesita ser configurado. margin-left depende del niño width. La fórmula es:

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

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

Demostración #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 #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;
}

Tuve un problema similar. Se suponía que el contenido del elemento secundario permanecería en el elemento principal, mientras que el fondo tenía que extenderse por todo el ancho de la ventana gráfica.

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

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