html - ফ্লেক্সবক্স আকার পরিবর্তন এবং স্ক্রোলযোগ্য ওভারফ্লো



css css3 (1)

min-height: 0 যোগ করুন min-height: 0 থেকে। .flexGrowWrapper - নীচে ডেমো দেখুন: 

$("button").click(function() {
  $(".resize").toggleClass("small");
});
.resize {
  height: 200px;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  width: 300px;
}

.resize.small {
  height: 100px;
}

.heading {
  flex: 0 0 auto;
}

.flexGrowWrapper {
  border: 2px solid red;
  flex-grow: 1;
  min-height: 0; /* ADDED */
}

.wrapper {
  height: 100%;
  overflow-y: auto;
}

.content {
  display: flex;
  flex-direction: row;
  clear: both;
}
<button>
Resize
</button>
<div class="resize">
  <div class="heading">
    <label>Some heading that wont scroll</label>
  </div>
  <div class="flexGrowWrapper">
    <div class="wrapper">
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
    </div>
  </div>
</div>
<div>
  Something else here
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

কেন এই কাজ করে

নোট করুন যে এটি একটি কলামের ফ্লেক্সবক্সের জন্য ডিফল্ট min-height মান auto ( ফ্লেক্স অক্ষের পাশে)। আপনি নীচের এই আচরণের কিছু উদাহরণ দেখতে পারেন:

এই প্রশ্নটি ইতিমধ্যে একটি উত্তর আছে:

আমার কাছে এমন সামগ্রী রয়েছে যা আমি আকার পরিবর্তন করছি, এবং আমি একটি নির্দিষ্ট শিরোনাম চাই যা হ্রাস / সঙ্কুচিত হয় না এবং স্ক্রোলযোগ্য সামগ্রীর অংশ নয়। পর্যাপ্ত স্থান নেই যদি নীচের কন্টেন্ট স্ক্রোলযোগ্য হয়ে উঠছে।

বিষয়বস্তু বাইরের মোড়ক ( flexGrowWrapper ) একটি flex-grow: 1 এবং ভিতরের wrapper height: 100%; overflow-y: auto height: 100%; overflow-y: auto । এখানে চিন্তার প্রক্রিয়াটি যে flexGrowWrapper div এর মধ্যে কোন অবশিষ্ট স্থান ভরাট করবে, অভ্যন্তরীণ মোড়ক তারপর flexGrowWrapper এর পূর্ণ উচ্চতা নিতে হবে এবং যদি ওভারফ্লো হয়, এটা স্ক্রোল করা উচিত।

কী হচ্ছে তা হল, flexGrowWrapper resize flexGrowWrapper এলাকাটি পূরণ করতে বাড়ছে, কিন্তু মনে হচ্ছে এটির সামগ্রীটি এর মিনি-উচ্চতা নির্ধারণ করছে।

আমি কিভাবে flexGrowWrapper resize উচ্চতা অতিক্রম করতে পারেন? 

$("button").click(function() {
	$(".resize").toggleClass("small");
});
.resize {
  height: 200px;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  width: 300px;
}

.resize.small {
  height: 100px;
}

.heading {
  flex: 0 0 auto;
}

.flexGrowWrapper {
  border: 2px solid red;
  flex-grow: 1;
}

.wrapper {
  height: 100%;
  overflow-y: auto;
}

.content {
  display: flex;
  flex-direction: row;
  clear: both;
}
<button>
Resize
</button>
<div class="resize">
  <div class="heading">
  <label>Some heading that wont scroll</label>
  </div>
  <div class="flexGrowWrapper">
    <div class="wrapper">
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
      <div class="content">
        content
      </div>
    </div>
  </div>
</div>
<div>
 Something else here
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

নোট: আমি এই একই প্রশ্নটি দেখেছি, কিন্তু এতে কিছু পার্থক্য আছে বলে মনে হচ্ছে এবং আমি আমার জন্য কাজ করার সমাধান পেতে পারিনি।




html   css   css3   flexbox  


flexbox