'Page break inside avoid in flex not working as expected

I have a container which contains several divs which 2 column layout. I want the divs to printed in the new page when I convert to pdf.

I have gone through few articles on page-break-inside, but it didn't go well. Also tried many SO answers, everything was my bad luck.

I don't understand why page-break-inside:avoid not working in my code.

I want the .item class to break to new page when it is in the middle of two pages.

Here is the full code of it:

.item {
  width: 100%
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container>div {
  flex: 0 50%;
  box-sizing:border-box;
     border:2px solid red;
}

@media print {
    .container>div {
        display: block;
        page-break-inside: avoid;
    }
}

<div class="container">
  <div class="item">1. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
  <div class="item">2 . Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
  <div class="item">3. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
  <div class="item">4. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ip</div>
   <div class="item">5. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
   <div class="item">6. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of</div>
</div>

I am hoping to get the answer.

Also tried with bootstrap, but still of no luck. below is the code using bootstrap.

https://codepen.io/chintuyadav/pen/wvaMZQg?editors=1100

Thank you in advance for your time.

Solution 1:^[1]

Page-break-inside applies to block-level elements in the normal flow of the root element.

User agents may also apply it to other elements like table-row elements.

For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside

Solution 2:^[2]

@chintuyadavsara, Thanks, I just ran into this issue and your answer led me to the issue. My div was contained in another div with the display set to flex. It did not help me to find a solution but at least I know why it is not working.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test break-inside: avoid;</title>
    <style>
      .flex_container {
        display: flex;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
      }
      .content_box {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
        background-color: white;
        height: 250px;
        width: 250px;
        display: block;
        border-radius: 20px;
        padding: 10px;
        text-align: center;
        margin: 25px;
        cursor: pointer;
        overflow: hidden;
        
        break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="flex_container">
      <div class="content_box">Sample 1</div>
      <div class="content_box">Sample 2</div>
      <div class="content_box">Sample 3</div>
      <div class="content_box">Sample 4</div>
      <div class="content_box">Sample 5</div>
      <div class="content_box">Sample 6</div>
      <div class="content_box">Sample 7</div>
      <div class="content_box">Sample 8</div>
      <div class="content_box">Sample 9</div>
      <div class="content_box">Sample 10</div>
      <div class="content_box">Sample 11</div>
      <div class="content_box">Sample 12</div>
      <div class="content_box">Sample 13</div>
      <div class="content_box">Sample 14</div>
      <div class="content_box">Sample 15</div>
      <div class="content_box">Sample 16</div>
    </div>
  </body>
</html>

Just found a solution.

flex_container: Change display: flex to display: table
flex_container: Remove flex-wrap: wrap;
content_box: Change display: block to display: inline-block

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test 2 break-inside: avoid;</title>
    <style>
      .flex_container {
        display: table;
        margin-right: -15px;
        margin-left: -15px;
      }
      .content_box {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
        background-color: white;
        height: 250px;
        width: 250px;
        display: inline-block;
        border-radius: 20px;
        padding: 10px;
        text-align: center;
        margin: 25px;
        cursor: pointer;
        overflow: hidden;
        
        break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="flex_container">
      <div class="content_box">Sample 1</div>
      <div class="content_box">Sample 2</div>
      <div class="content_box">Sample 3</div>
      <div class="content_box">Sample 4</div>
      <div class="content_box">Sample 5</div>
      <div class="content_box">Sample 6</div>
      <div class="content_box">Sample 7</div>
      <div class="content_box">Sample 8</div>
      <div class="content_box">Sample 9</div>
      <div class="content_box">Sample 10</div>
      <div class="content_box">Sample 11</div>
      <div class="content_box">Sample 12</div>
      <div class="content_box">Sample 13</div>
      <div class="content_box">Sample 14</div>
      <div class="content_box">Sample 15</div>
      <div class="content_box">Sample 16</div>
    </div>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	chintuyadavsara
Solution 2

'Page break inside avoid in flex not working as expected

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]