Question

我有一个简单的行flexbox布局，一个大列和两个小列，每个浏览器在浏览器中看起来都正确打印，它们只是在大列的内容中打破页面，但Firefox似乎无法做到因此我在第一页上面有第一页上的内容和第三页上的内容，这里是我的页面：

＆＃13;

.wrapper {
  display: flex;
  flex-direction: row;
}

.column {
  flex-basis: 32%;
}

＆＃13;

<div>some stuff before</div>

<div class="wrapper">
  <div class="column">
    first column
  </div>
  <div class="column">
    second column
    <div>Aliqua Lorem laboris fugiat incididunt adipisicing eu duis. Culpa aliqua in sint cupidatat adipisicing mollit ad sit incididunt occaecat labore ea. Incididunt incididunt elit ad labore irure aliquip irure occaecat. Cupidatat cillum ipsum aliqua non
      laborum. Aliqua minim fugiat et nulla eiusmod.</div>
    <div>Aliqua Lorem laboris fugiat incididunt adipisicing eu duis. Culpa aliqua in sint cupidatat adipisicing mollit ad sit incididunt occaecat labore ea. Incididunt incididunt elit ad labore irure aliquip irure occaecat. Cupidatat cillum ipsum aliqua non
      laborum. Aliqua minim fugiat et nulla eiusmod.</div>
    <div>Aliqua Lorem laboris fugiat incididunt adipisicing eu duis. Culpa aliqua in sint cupidatat adipisicing mollit ad sit incididunt occaecat labore ea. Incididunt incididunt elit ad labore irure aliquip irure occaecat. Cupidatat cillum ipsum aliqua non
      laborum. Aliqua minim fugiat et nulla eiusmod.</div>
    <div>Aliqua Lorem laboris fugiat incididunt adipisicing eu duis. Culpa aliqua in sint cupidatat adipisicing mollit ad sit incididunt occaecat labore ea. Incididunt incididunt elit ad labore irure aliquip irure occaecat. Cupidatat cillum ipsum aliqua non
      laborum. Aliqua minim fugiat et nulla eiusmod.</div>
    <div>Aliqua Lorem laboris fugiat incididunt adipisicing eu duis. Culpa aliqua in sint cupidatat adipisicing mollit ad sit incididunt occaecat labore ea. Incididunt incididunt elit ad labore irure aliquip irure occaecat. Cupidatat cillum ipsum aliqua non
      laborum. Aliqua minim fugiat et nulla eiusmod.</div>
    <div>Aliqua Lorem laboris fugiat incididunt adipisicing eu duis. Culpa aliqua in sint cupidatat adipisicing mollit ad sit incididunt occaecat labore ea. Incididunt incididunt elit ad labore irure aliquip irure occaecat. Cupidatat cillum ipsum aliqua non
      laborum. Aliqua minim fugiat et nulla eiusmod.</div>
    <div>Aliqua Lorem laboris fugiat incididunt adipisicing eu duis. Culpa aliqua in sint cupidatat adipisicing mollit ad sit incididunt occaecat labore ea. Incididunt incididunt elit ad labore irure aliquip irure occaecat. Cupidatat cillum ipsum aliqua non
      laborum. Aliqua minim fugiat et nulla eiusmod.</div>
    <div>Aliqua Lorem laboris fugiat incididunt adipisicing eu duis. Culpa aliqua in sint cupidatat adipisicing mollit ad sit incididunt occaecat labore ea. Incididunt incididunt elit ad labore irure aliquip irure occaecat. Cupidatat cillum ipsum aliqua non
      laborum. Aliqua minim fugiat et nulla eiusmod.</div>

  </div>
  <div class="column">
    third column
  </div>
</div>

<div>some stuff after</div>

＆＃13;

更新

一些截图：

firefox version (3 print pages)

chrome and others browsers version

在Firefox中打印flexbox行布局时出现问题

0 个答案: