css grid 100% width and max-width

Question

I have created a grid and now have problems with max-width. I want to have containers which take up the available width and are restricted by a left and right margin. This containers can contain children. These children may be bigger then the parent container and may be moved with the class .move-to-right-border to the right border to take up full width on the right.

I now have added a max-width to the container, to restrict the width. But now i have the problem that i can't set child elements to take up full width. I tried with 100vw, but width 100vw the scrollbar is included. Has anybody a solution for this problem?

Maybe it gets more clear with this example, comment max-width in and out to see what i want.

.row-right {
  box-sizing: border-box;
  margin-left: 200px;
  margin-right: 100px;
  max-width: 700px; /* to see the problem comment max-width in and out */
  width: calc(100% - 100px - 200px);
  border: 1px solid red;
}

.move-to-right-border {
  box-sizing: border-box;
  width: calc(100% + 100px);
  border: 2px solid blue;
}

http://codepen.io/anon/pen/eJymOL

Answer 1

just use below css

CSS

.row-right p {
  text-align: justify;
  width : 100%
}

Hope this will help you :)