Tajuk Tidak dapat menatal ke atas item fleksibel dalam bekas limpahan ditulis semula sebagai: Tidak dapat menatal ke atas item fleksibel dalam bekas limpahan

Question

Semasa cuba mencipta modal yang berguna menggunakan flexbox, saya terjumpa perkara yang kelihatan seperti isu penyemak imbas dan tertanya-tanya sama ada terdapat pembetulan atau penyelesaian yang diketahui - atau sebarang idea tentang cara untuk membetulkannya idea.

Masalah yang saya cuba selesaikan mempunyai dua aspek. Pertama, memusatkan tetingkap modal secara menegak berfungsi seperti yang diharapkan. Yang kedua ialah membuat tatal tetingkap modal - tatal luaran, jadi keseluruhan tetingkap modal tatal, bukan kandungan di dalamnya (dengan cara ini anda boleh mempunyai menu lungsur turun dan elemen UI lain yang boleh melangkaui skop modal - seperti adat pemilih tarikh tunggu).

Walau bagaimanapun, apabila menggunakan pemusatan menegak bersama-sama dengan bar skrol, bahagian atas modal mungkin menjadi tidak boleh diakses kerana ia mula melimpah. Dalam contoh di atas, anda mengubah saiz untuk memaksa limpahan, dan dengan berbuat demikian, ia membolehkan anda menatal ke bahagian bawah modal, tetapi tidak ke atas (perenggan pertama dipotong).

.modal-container {
  kedudukan: tetap;
  atas: 0;
  kiri: 0;
  bawah: 0;
  kanan: 0;
  latar belakang: rgba(0, 0, 0, 0.5);
  limpahan-x: auto;
}
.modal-container .modal-window {
  paparan: -ms-flexbox;
  paparan: flex;
  flex-direction: lajur;
  align-item: tengah;
  justify-content: pusat;
  /* Sokongan pilihan untuk mengesahkan tingkah laku tatal masuk akal dalam IE10
  //-ms-flex-direction: lajur;
  //-ms-flex-align: center;
  //-ms-flex-pack: pusat; */
  ketinggian: 100%;
}
.modal-container .modal-window .modal-content {
  sempadan: 1px pepejal #ccc;
  jejari sempadan: 4px;
  latar belakang: #fff;
  lebar: 100%;
  lebar maksimum: 500px;
  padding: 10px
}</pra>
<pre class="brush:html;toolbar:false;"><div class="modal-container">
    <div class="modal-window">
        <div class="modal-content">
            <p class="p3">Lorem Ipsum hanyalah teks tiruan bagi industri percetakan dan taip huruf. Lorem Ipsum telah menjadi teks tiruan standard industri sejak tahun 1500-an, apabila pencetak yang tidak dikenali mengambil galley jenis dan berebut-rebut untuk membuat buku spesimen jenis. Ia telah bertahan bukan sahaja lima abad, tetapi juga lompatan ke dalam penataan elektronik, kekal pada asasnya tidak berubah. Ia telah dipopularkan pada tahun 1960-an dengan keluaran helaian Letraset yang mengandungi petikan Lorem Ipsum, dan lebih baru-baru ini dengan perisian penerbitan desktop seperti Aldus PageMaker termasuk versi Lorem Ipsum.</p>
            <p class="p3">Lorem Ipsum hanyalah teks tiruan bagi industri percetakan dan taip huruf. Lorem Ipsum telah menjadi teks tiruan standard industri sejak tahun 1500-an, apabila pencetak yang tidak dikenali mengambil galley jenis dan berebut-rebut untuk membuat buku spesimen jenis. Ia telah bertahan bukan sahaja lima abad, tetapi juga lompatan ke dalam penataan elektronik, kekal pada asasnya tidak berubah. Ia telah dipopularkan pada tahun 1960-an dengan keluaran helaian Letraset yang mengandungi petikan Lorem Ipsum, dan lebih baru-baru ini dengan perisian penerbitan desktop seperti Aldus PageMaker termasuk versi Lorem Ipsum.</p>
            <p class="p3">Lorem Ipsum hanyalah teks tiruan bagi industri percetakan dan taip huruf. Lorem Ipsum telah menjadi teks tiruan standard industri sejak tahun 1500-an, apabila pencetak yang tidak dikenali mengambil galley jenis dan berebut-rebut untuk membuat buku spesimen jenis. Ia telah bertahan bukan sahaja lima abad, tetapi juga lompatan ke dalam penataan elektronik, kekal pada asasnya tidak berubah. Ia telah dipopularkan pada tahun 1960-an dengan keluaran helaian Letraset yang mengandungi petikan Lorem Ipsum, dan lebih baru-baru ini dengan perisian penerbitan desktop seperti Aldus PageMaker termasuk versi Lorem Ipsum.</p>
        </div>
    </div>
</div>

这影响（当前的）Firefox，Safari，Chrome和Opera。有趣的是，在IE10中，如果您取消注释IE10取消注释IE10取消注释IE10供家安中可了家确实是正确的 - 我还没有在IE11中进行测试，但假设行为与IE10相匹配。

这是示例代码的链接（高度简化）

https://jsfiddle.net/dh9k18k0/2/

Answer 1

Saya hanya menggunakan 3 bekas untuk mencapai kesan ini. Caranya ialah dengan memisahkan bekas flexbox daripada bekas yang mengawal penatalan. Akhir sekali, masukkan semuanya ke dalam bekas akar untuk memusatkannya. Berikut ialah gaya utama yang anda perlukan untuk mencipta kesan:

.root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-container {
  margin: auto;
  max-height: 100%;
  overflow: auto;
}

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="root">
  <div class="scroll-container">
    <div class="flex-container">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>

Saya membuat demo di sini: https://jsfiddle.net/r5jxtgba/14/

Answer 2

Soalan

Flexbox menjadikan pemusatan sangat mudah.

Hanya sapukan align-items: center和justify-content: center pada bekas flex dan item flex anda akan dipusatkan secara menegak dan mendatar.

Namun, terdapat masalah dengan pendekatan ini apabila item flex lebih besar daripada bekas flex.

Seperti yang dinyatakan dalam soalan, apabila item fleksibel melimpahi bekas, bahagian atas menjadi tidak boleh diakses.

Dengan limpahan mendatar, bahagian kiri menjadi tidak boleh diakses (atau bahagian kanan dalam bahasa RTL).

Berikut ialah contoh bekas LTR yang mengandungi justify-content: center dan tiga item fleksibel:

Lihat bahagian bawah jawapan ini untuk penerangan tentang tingkah laku ini.

---

Penyelesaian #1

Untuk menyelesaikan masalah ini, gunakan flexbox auto-margins dan bukannya justify-content.

Menggunakan auto jidar, item flex yang melimpah boleh dipusatkan secara menegak dan mendatar tanpa kehilangan akses kepada mana-mana bahagian daripadanya.

Jadi, jangan gunakan kod ini pada bekas fleksibel:

#flex-container {
    align-items: center;
    justify-content: center;
}

Gunakan kod ini pada item flex:

.flex-item {
    margin: auto;
}

Demo yang disemak

---

Penyelesaian #2 (belum dilaksanakan dalam kebanyakan pelayar)

Tambahkan nilai safe pada peraturan penjajaran kata kunci anda seperti ini:

justify-content: safe center

atau

align-self: safe center

Dari Spesifikasi Modul Penjajaran Kotak CSS:

Nota: Modul Penjajaran Kotak berfungsi dengan berbilang model susun atur kotak, bukan hanya lentur. Jadi, dalam petikan spesifikasi di atas, istilah dalam kurungan segi empat sama sebenarnya ialah "badan penjajaran", "bekas penjajaran", dan "start". Saya menggunakan terminologi khusus fleksibel untuk mengekalkan tumpuan pada isu khusus ini.

---

Tatal arahan had daripada MDN: