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




css3 layout (4)

position:absolute; সঙ্গে কাজ position:absolute; flex বরাবর:

অবস্থান সঙ্গে ফ্লেক্স আইটেম position: relative । তারপরে এর ভিতরে আরেকটি <div> উপাদান যুক্ত করুন:

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

এটি উপাদানটি তার আপেক্ষিক-অবস্থানযুক্ত পিতা-মাতার সীমানায় প্রসারিত করে তবে এটি প্রসারিত করার অনুমতি দেয় না। ভিতরে, overflow: auto; তারপর প্রত্যাশিত হিসাবে কাজ করবে।

  • কোড স্নিপেট উত্তর অন্তর্ভুক্ত - ক্লিক করুন এবং তারপর ক্লিক করুন স্নিপেট চালানোর পরে OR
  • here জন্য here ক্লিক here
  • ফলাফল:

.all-0 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
p {
  text-align: justify;
}
.bottom-0 {
  bottom: 0;
}
.overflow-auto {
  overflow: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>


<div class="p-5 w-100">
  <div class="row bg-dark m-0">
    <div class="col-sm-9 p-0 d-flex flex-wrap">
      <!-- LEFT-SIDE - ROW-1 -->
      <div class="row m-0 p-0">
        <!-- CARD 1 -->
        <div class="col-md-8 p-0 d-flex">
          <div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
            <img class="img img-fluid" src="https://via.placeholder.com/700x250">
            <h4>Heading 1</h4>
            <p>
              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
          </div>
        </div>
        <!-- CARD 2 -->
        <div class="col-md-4 p-0 d-flex">
          <div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
            <img class="img img-fluid" src="https://via.placeholder.com/400x250">
            <h4>Heading 1</h4>
            <p>
              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
          </div>
        </div>
      </div>
      <div class="row m-0">
        <!-- CARD 3 -->
        <div class="col-md-4 p-0 d-flex">
          <div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
            <img class="img img-fluid" src="https://via.placeholder.com/400x250">
            <h4>Heading 1</h4>
            <p>
              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
          </div>
        </div>
        <!-- CARD 4 -->
        <div class="col-md-4 p-0 d-flex">
          <div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
            <img class="img img-fluid" src="https://via.placeholder.com/400x250">
            <h4>Heading 1</h4>
            <p>
              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
          </div>
        </div>
        <!-- CARD 5-->
        <div class="col-md-4 p-0 d-flex">
          <div class="my-card-content bg-white p-2 m-2 d-flex flex-column">
            <img class="img img-fluid" src="https://via.placeholder.com/400x250">
            <h4>Heading 1</h4>
            <p>
              Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old...
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3 p-0">
      <div class="bg-white m-2 p-2 position-absolute all-0 d-flex flex-column">
        <h4>Social Sidebar...</h4>
        <hr />
        <div class="d-flex overflow-auto">
          <p>
            Topping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart.
            opping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart.
            opping candy tiramisu soufflé fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halva fruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart.
            Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream
            chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halvafruitcake ice cream chocolate
            bar. Bear claw ice cream chocolate bar donut sweet tart. Pudding cupcake danish apple pie apple pie. Halva
        </div>
      </div>
    </div>
  </div>

শুভকামনা ...

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

.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 বাক্সের উচ্চতা অতিক্রম করে থাকে?


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

এইচটিএমএল:

<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


এই যোগ করুন:

align-items: flex-start;

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

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


একটু দেরী হলেও এটি সাহায্য করতে পারে: 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;
}

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





flexbox