css Overflowing কন্টেন্ট সঙ্গে একটি flexbox স্ক্রোলিং




css3 layout (4)

একটু দেরী হলেও এটি সাহায্য করতে পারে: http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269

মূলত আপনাকে html , body height: 100%; এবং আপনার সমস্ত সামগ্রী একটি <div class="wrap"> <!-- content --> </div>

সিএসএস:

html, body {
  height: 100%;
}

.wrap {
  height: 100vh;
  display: flex;
}

আমার জন্য কাজ। আশা করি এটা সাহায্য করবে

উপরের কোডটি অর্জন করার জন্য আমি এখানে ব্যবহার করছি কোডটি এখানে :

.header {
  height: 50px;
}

.body {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
}

.sidebar {
  width: 140px;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: flex;
}

.column {
  padding: 20px;
  border-right: 1px solid #999;
}
<div class="header">Main header</div>
<div class="body">
  <div class="sidebar">Sidebar</div>

  <div class="main">
    <div class="page-header">Page Header. Content columns are below.</div>
    <div class="content">
      <div class="column">Column 1</div>
      <div class="column">Column 1</div>
      <div class="column">Column 1</div>
    </div>
  </div>
</div>

আমি স্টাইলিং জন্য ব্যবহৃত কোড বাদ দেওয়া। আপনি কলম এটি সব দেখতে পারেন।

উপরোক্ত কাজগুলি, কিন্তু যখন content এলাকার সামগ্রীর সামগ্রিকভাবে প্রবাহিত হয়, তখন এটি সম্পূর্ণ পৃষ্ঠা স্ক্রোল করে। আমি শুধুমাত্র বিষয়বস্তু এলাকাটিকে স্ক্রোল করতে চাই, তাই আমি overflow: auto যুক্ত করেছি overflow: auto content বিভাগে overflow: auto

এখন সমস্যা হচ্ছে যে কলামগুলি তাদের পিতামাতার উচ্চতা ছাড়িয়ে প্রসারিত হয় না, তাই সীমান্তগুলিও কেটে ফেলা হয়।

এখানে স্ক্রোলিং সমস্যা দেখাচ্ছে কলম

আমি কিভাবে স্বাধীনভাবে স্ক্রোল করতে content এলাকা সেট করতে পারি, যদিও এখনও তার সন্তানরা content বাক্সের উচ্চতা অতিক্রম করে থাকে?


আমি শুধু অনেক সমস্যা এবং ত্রুটির পরে খুব সুন্দরভাবে এই সমস্যা সমাধান।

আমার ব্লগ পোস্টটি দেখুন: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout

মূলত, একটি flexbox সেল স্ক্রোলযোগ্য করতে, আপনি তার সব পিতামাতার overflow: hidden; করতে হবে overflow: hidden; , অথবা এটি কেবল আপনার ওভারফ্লো সেটিংস উপেক্ষা করবে এবং পিতামাতার পরিবর্তে বড় করে তুলবে।


এই যোগ করুন:

align-items: flex-start;

.content {} জন্য নিয়ম। এটা আমার জন্য আপনার কলম এ সংশোধন করে, কমপক্ষে (ফায়ারফক্স এবং ক্রোম উভয়)।

ডিফল্টরূপে, .content এর align-items: stretch , যা এটির উচ্চ-উচ্চতা বাচ্চাদের সমস্ত আকারকে তার উচ্চতা অনুসারে .content , প্রতি http://dev.w3.org/csswg/css-flexbox/#algo-stretch । বিপরীতে, মানটি flex-start ফলে সন্তানরা তাদের নিজস্ব উচ্চতাগুলি গণনা করতে পারে এবং তার প্রারম্ভিক প্রান্তে (এবং ওভারফ্লো এবং একটি স্ক্রলবার ট্রিগার করে) নিজেকে আলগা করে।


আমি এই সম্পর্কে ট্যাব এটকিনস (ফ্লেক্সবক্স স্পেক এর লেখক) এর সাথে কথা বললাম, এবং আমরা এটি নিয়ে এসেছি:

এইচটিএমএল:

<div class="content">
    <div class="box">
        <div class="column">Column 1</div>
        <div class="column">Column 1</div>
        <div class="column">Column 1</div>
    </div>
</div>

সিএসএস:

.content {
    flex: 1;
    display: flex;
    overflow: auto;
}

.box {
    min-height: min-content; /* needs vendor prefixes */
    display: flex;
}

এখানে কলম আছে:

  1. ছোট কলাম প্রসারিত হচ্ছে
  2. দীর্ঘ কলাম overflowing এবং স্ক্রোলিং

এই কাজটি কারন কারণ align-items: stretch তার আইটেমগুলি সঙ্কুচিত করে না যদি তাদের অভ্যন্তরীণ উচ্চতা থাকে, যা এখানে min-content দ্বারা min-content





flexbox