Text overflowing out of @media print-CodePudding

I have a parent container, with several child containers. Here is the styling of each:

@media print {
  #par-container {
     width: 100% !important;
     position: absolute !important;
     top: -10px !important;
     left: -25px !important;
     margin-left: 5px !important;
     margin-right: 5px !important;
  }
}

 .child-container {
   margin-top: 50px;
   width: 100%;
   border: solid;
   border-color: grey;
   border-radius: 5px;
   border-radius: 5px;
   display: block;
}

<div id="par-container">
  <div className="child-container">stuff1</div>
  <div className="child-container">stuff2</div>
  <div className="child-container">stuff3</div>
  <div className="child-container">stuff4</div>
</div>

When I try to print the document, the text inside of the child container overflows the height of the child container, by overflowing the bottom of the container.

Because I used width: 100% !important in par-container, there is no overflow beyond the width. That is fine.

I wish I could show a screenshot of it, but I cannot due to privacy.

CodePudding user response：

.child-container {
      margin-top: 50px;
      width: 100%;
      border:5px solid gray;
      border-radius: 5px;
}

@media print {
      #par-container {
         width: 100%;
         position: absolute;
         top: -10px;
         /* left: -25px; */
         margin-left: 5px;
         margin-right: 5px;
      }
      .child-container {
            width: 90%;  
      }
}

like this ?

CodePudding user response：

This is the solution I can provide from what I understood from your question.

@media print {
  #par-container {
     width: 100% ;
     position: absolute ;
     padding: 0 20px;
     display: flex;
     flex-direction: column;
  }
}

.child-container {
   margin-top: 50px;
   width: 100%;
   border: 2px solid grey;
   border-radius: 5px;
}

  <div id="par-container">
    <div >stuff1</div>
    <div >stuff2</div>
    <div >stuff3</div>
    <div >stuff4</div>
  </div>