css - আমার অবস্থান: ফ্লেক্সবক্স ব্যবহার করার সময় স্টিকি উপাদান স্টিকি নয়



flexbox sticky (1)

আমি এটির জন্য কিছুটা আটকে ছিলাম এবং ভেবেছিলাম যে আমি এই position: sticky ভাগ করব position: sticky + ফ্লেক্স বক্স গেটচা:

আমার স্টিকি ডিভ ঠিকঠাক কাজ করছিল যতক্ষণ না আমি আমার ভিউটিকে একটি ফ্লেক্স বক্স ধারকটিতে স্যুইচ করেছিলাম, এবং হঠাৎ ডিভিটি কোনও ফ্লেক্স বাক্সের প্যারেন্টে আবৃত হওয়ার পরে আঠালো ছিল না।

.flexbox-wrapper {
  display: flex;
  height: 600px;
}
.regular {
  background-color: blue;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: red;
}
<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>

জেএসফিডেল সমস্যা দেখাচ্ছে


যেহেতু ফ্লেক্স বক্স উপাদানগুলি ডিফল্টরূপে stretch হয় তাই সমস্ত উপাদান একই উচ্চতা, যার বিরুদ্ধে স্ক্রোল করা যায় না।

align-self: flex-start স্টিকি উপাদানটিতে align-self: flex-start উচ্চতায় অটোকে সেট করে যা স্ক্রোলিংয়ের অনুমতি দেয় এবং এটি স্থির করে দেয়।

বর্তমানে এটি কেবল সাফারি এবং এজতে supported

.flexbox-wrapper {
  display: flex;
  overflow: auto;
  height: 200px;          /* Not necessary -- for example only */
}
.regular {
  background-color: blue; /* Not necessary -- for example only */
  height: 600px;          /* Not necessary -- for example only */
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start; /* <-- this is the fix */
  background-color: red;  /* Not necessary -- for example only */
}
<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>

সমাধান দেখাচ্ছে জেএসফিডাল showing





sticky