search

Kozea / WeasyPrint

The awesome document factory
https://weasyprint.org
BSD 3-Clause "New" or "Revised" License
7.23k stars 686 forks source link

Flex div not working as it moves to the next page entirely #2287

Closed boredape1 closed 2 weeks ago

boredape1 commented 3 weeks ago

Why does WeasyPrint start the flex div on the next page while leaving the current page empty? If the content is too large to fit on the current page, it moves entirely to the next page.

Below is the sample you can try . 



from weasyprint import HTML

html_content = '''
<!DOCTYPE html>

<head>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 2px;
            padding: 2px;

        }
        h1 {
            color: #333;
        }
        p {
            font-size: 14px;
            line-height: 1.5;
        }
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            margin-top: 2px;

            padding: 1px;
        }
        .flex-item {
            background-color: #f1f1f1;
            border: 1px solid #ccc;
            margin: 5px;
            padding: 10px;
            width: calc(33% - 22px); 
            box-sizing: border-box;
            text-align: center;
        }
    </style>
</head>
<body>

    <h1>Why is the below page blank and flex container starts from next page ? </h1>

    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
    <div class="flex-item">16</div>
    <div class="flex-item">17</div>
    <div class="flex-item">18</div>
    <div class="flex-item">19</div>
    <div class="flex-item">20</div>
    <div class="flex-item">21</div>
    <div class="flex-item">22</div>
    <div class="flex-item">23</div>
    <div class="flex-item">24</div>
    <div class="flex-item">25</div>
    <div class="flex-item">26</div>
    <div class="flex-item">27</div>
    <div class="flex-item">28</div>
    <div class="flex-item">29</div>
    <div class="flex-item">30</div>
    <div class="flex-item">31</div>
    <div class="flex-item">32</div>
    <div class="flex-item">33</div>
    <div class="flex-item">34</div>
    <div class="flex-item">35</div>
    <div class="flex-item">36</div>
    <div class="flex-item">37</div>
    <div class="flex-item">38</div>
    <div class="flex-item">39</div>
    <div class="flex-item">40</div>
    <div class="flex-item">41</div>
    <div class="flex-item">42</div>
    <div class="flex-item">43</div>
    <div class="flex-item">44</div>
    <div class="flex-item">45</div>
    <div class="flex-item">46</div>
    <div class="flex-item">47</div>
    <div class="flex-item">48</div>
    <div class="flex-item">49</div>
    <div class="flex-item">50</div>
    <div class="flex-item">50</div>
    <div class="flex-item">51</div>
    <div class="flex-item">52</div>
    <div class="flex-item">53</div>
    <div class="flex-item">54</div>
    <div class="flex-item">55</div>
    <div class="flex-item">56</div>
    <div class="flex-item">57</div>
    <div class="flex-item">58</div>
    <div class="flex-item">59</div>
    <div class="flex-item">60</div>
    <div class="flex-item">61</div>
    <div class="flex-item">62</div>
    <div class="flex-item">63</div>
    <div class="flex-item">64</div>
    <div class="flex-item">65</div>
    <div class="flex-item">66</div>
    <div class="flex-item">67</div>
    <div class="flex-item">68</div>
    <div class="flex-item">69</div>
    <div class="flex-item">70</div>
    <div class="flex-item">71</div>
    <div class="flex-item">72</div>
    <div class="flex-item">73</div>
    <div class="flex-item">74</div>
    <div class="flex-item">75</div>
    <div class="flex-item">76</div>
    <div class="flex-item">77</div>
    <div class="flex-item">78</div>
    <div class="flex-item">79</div>
    <div class="flex-item">80</div>
    <div class="flex-item">81</div>
    <div class="flex-item">82</div>
    <div class="flex-item">83</div>
    <div class="flex-item">84</div>
    <div class="flex-item">85</div>
    <div class="flex-item">86</div>
    <div class="flex-item">87</div>
    <div class="flex-item">88</div>
    <div class="flex-item">89</div>
    <div class="flex-item">90</div>
    <div class="flex-item">91</div>
    <div class="flex-item">92</div>
    <div class="flex-item">93</div>
    <div class="flex-item">94</div>
    <div class="flex-item">95</div>
    <div class="flex-item">96</div>
    <div class="flex-item">97</div>
    <div class="flex-item">98</div>
    <div class="flex-item">99</div>
    <div class="flex-item">100</div>
     <div class="flex-item">100</div>
    <div class="flex-item">101</div>
    <div class="flex-item">102</div>
    <div class="flex-item">103</div>
    <div class="flex-item">104</div>
    <div class="flex-item">105</div>
    <div class="flex-item">106</div>
    <div class="flex-item">107</div>
    <div class="flex-item">108</div>
    <div class="flex-item">109</div>
    <div class="flex-item">110</div>
    <div class="flex-item">111</div>
    <div class="flex-item">112</div>
    <div class="flex-item">113</div>
    <div class="flex-item">114</div>
    <div class="flex-item">115</div>
    <div class="flex-item">116</div>
    <div class="flex-item">117</div>
    <div class="flex-item">118</div>
    <div class="flex-item">119</div>
    <div class="flex-item">120</div>
    <div class="flex-item">121</div>
    <div class="flex-item">122</div>
    <div class="flex-item">123</div>
    <div class="flex-item">124</div>
    <div class="flex-item">125</div>
    <div class="flex-item">126</div>
    <div class="flex-item">127</div>
    <div class="flex-item">128</div>
    <div class="flex-item">129</div>
    <div class="flex-item">130</div>
    <div class="flex-item">131</div>
    <div class="flex-item">132</div>
    <div class="flex-item">133</div>
    <div class="flex-item">134</div>
    <div class="flex-item">135</div>
    <div class="flex-item">136</div>
    <div class="flex-item">137</div>
    <div class="flex-item">138</div>
    <div class="flex-item">139</div>
    <div class="flex-item">140</div>
    <div class="flex-item">141</div>
    <div class="flex-item">142</div>
    <div class="flex-item">143</div>
    <div class="flex-item">144</div>
    <div class="flex-item">145</div>
    <div class="flex-item">146</div>
    <div class="flex-item">147</div>
    <div class="flex-item">148</div>
    <div class="flex-item">149</div>
    <div class="flex-item">150</div>
    <div class="flex-item">150</div>
    <div class="flex-item">151</div>
    <div class="flex-item">152</div>
    <div class="flex-item">153</div>
    <div class="flex-item">154</div>
    <div class="flex-item">155</div>
    <div class="flex-item">156</div>
    <div class="flex-item">157</div>
    <div class="flex-item">158</div>
    <div class="flex-item">159</div>
    <div class="flex-item">160</div>
    <div class="flex-item">161</div>
    <div class="flex-item">162</div>
    <div class="flex-item">163</div>
    <div class="flex-item">164</div>
    <div class="flex-item">165</div>
    <div class="flex-item">166</div>
    <div class="flex-item">167</div>
    <div class="flex-item">168</div>
    <div class="flex-item">169</div>
    <div class="flex-item">170</div>
    <div class="flex-item">171</div>
    <div class="flex-item">172</div>
    <div class="flex-item">173</div>
    <div class="flex-item">174</div>
    <div class="flex-item">175</div>
    <div class="flex-item">176</div>
    <div class="flex-item">177</div>
    <div class="flex-item">178</div>
    <div class="flex-item">179</div>
    <div class="flex-item">180</div>
    <div class="flex-item">181</div>
    <div class="flex-item">182</div>
    <div class="flex-item">183</div>
    <div class="flex-item">184</div>
    <div class="flex-item">185</div>
    <div class="flex-item">186</div>
    <div class="flex-item">187</div>
    <div class="flex-item">188</div>
    <div class="flex-item">189</div>
    <div class="flex-item">190</div>
    <div class="flex-item">191</div>
    <div class="flex-item">192</div>
    <div class="flex-item">193</div>
    <div class="flex-item">194</div>
    <div class="flex-item">195</div>
    <div class="flex-item">196</div>
    <div class="flex-item">197</div>
    <div class="flex-item">198</div>
    <div class="flex-item">199</div>
    <div class="flex-item">200</div>

</div>

</body>
</html>
'''

pdf_file_path = 'output.pdf'

HTML(string=html_content).write_pdf(pdf_file_path)

`
liZe commented 2 weeks ago

Hi!

Thanks for the report. It’s a duplicate of #1967.