Css - How to Overflow from Div to Full Width of Screen

* {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  margin: 0;  padding: 0;}.container {  max-width: 80%;  border: 1px solid red;  margin: 0 auto;}.fullwidth {  background: orange;}header {  height: 50px;  background: #663399;}.mydiv {  /* background: orange; */  min-height: 50px;}footer {  height: 50px;  background: #bada55;}

<div class="container">  <header></header></div><div class="fullwidth">  <div class="container">    <div class="mydiv">      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>    </div>    <div class="mydiv">      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>    </div>  </div></div><div class="container">  <footer></footer></div>

Overflow from div to full width of screen with alternating background color

From the docs

The CSS ::after pseudo-element matches a virtual last child of the
selected element. It is typically used to add cosmetic content to an
element by using the content CSS property. This element is inline by
default.

As it is a virtual child you can't select any further, but combining selectors is allowed, so what you can do is :nth-of-type(odd)::after.

I've created a fiddle to show what I mean, but you could do like this:

CSS:

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

.flex-parent{
    border:1px solid blue;
    position:relative;

  &:after {
    content:"";
    position:absolute;
    height:100%;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    z-index:-1;
    background:yellow;
  }

  &:nth-of-type(odd)::after{
    background-color:orange ;
  }

  &:nth-of-type(even)::after{
    background-color:red;
  } 
}

stretching inner div to full height of screen and content with overflow

At the moment the height of the container for the 1 million "contents" .contentcolumn is set to exactly match that of the flex item parent <div class="c2 content"> with the help of height: 100%;.

Naturally, the background(-color) of .contentcolumn will just affect the overflowing items up to this height and won't "follow" the vertically overflowing text content.

By setting the height definition of .contentcolumn to min-height, that text container:

1. will overflow in accordance with his text contents height,
2. will always have at least the height of his parent flex item

.contentcolumn {
  width: 100%;
  max-width: 300px;
  margin: auto;
  // height: 100%;
  min-height: 100%;   <= swapped height with min-height the height property of that container to make it fully cover its text content vertically
}

How can I have a div take up the full width of the screen?

https://jsfiddle.net/MarcusPls/h6sprgnm/

.box3 {
    background-color: #ccc;
    text-align: center;
  width: 100%;
  top: 100px;
  position: relative;
}

<div class="box3">
Box 3: I want this box to be below box 3 as I have it today, but I want this box to take up the entire width of the browser.
</div>

Here is an example of one way to work around your problem..

Also, you don't need to use /> for <br> to break a line... it is like pressing the enter key so just use "<br>"

Div taking up full width of page

By default div's are defined with display: block, meaning that they will take the entire available width.

You can specify that .desktop-image will be display: inline-block; and you will get the wanted result.

My suggestion to you is to use semantic HTML, there are 2 element that are dedicated to what you trying to achieve figure & figcaption.

Added an example with them.

.desktop-image {
  position: relative;
  display: inline-block;
}

.desktop-image img {
  vertical-align: middle;
}

.img_description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .7s, visibility .7s;
}

.desktop-image:hover .img_description {
  visibility: visible;
  opacity: 1;
}

<div id="images" class="misma">
  <div class="desktop-image">
    <img src="http://via.placeholder.com/200x200">
    <p class="img_description">This image looks super neat.</p>
  </div>
  <div class="mobile-image-misma">
    <img src="http://via.placeholder.com/100x100">
  </div>

  <figure class="desktop-image">
    <img src="http://via.placeholder.com/200x200">
    <figcaption class="img_description">This image looks super neat.</figcaption>
  </figure>
</div>

body {
  margin:0px;
  width:100vw;
  height:100vh;
  overflow:auto;
}

<meta name="viewport" content="width=device-width, initial-scale=1">

    .box {
      flex: 0 0 80px;
      height: 80px;
      background-color: red;
      margin: 10px;
      left: 10px;
    }

    .container{
      z-index: 10;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: flex-start;
      flex-wrap:nowrap;
      margin: auto;      
      -ms-overflow-style: none;
      animation: 2s ease-in-out 0s 1 slideInFromLeft;
    }

    @keyframes slideInFromLeft {
      0% {
        transform: translateX(-200%);
      }
      100% {
        transform: translateX(0);
      }
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <div class="container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>

  </body>
</html>