html - تغيير حجم Flexbox وتجاوزه للتمرير



css css3 (1)

أضف 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 flexGrowWrapper الداخلي به height: 100%; overflow-y: auto height: 100%; overflow-y: auto . عملية التفكير هنا هي أن flexGrowWrapper سوف تملأ أي مساحة متبقية داخل div resize ، وسوف يستغرق المجمع الداخلي ثم الارتفاع الكامل لـ flexGrowWrapper وإذا كان هناك تجاوز ، يجب التمرير.

ما يحدث هو أن flexGrowWrapper ينمو لملء مساحة resize ، ولكن يبدو أن محتواها تملي أنها أقل ارتفاعًا.

كيف يمكنني أن أجعل flexGrowWrapper لا يتجاوز resize منطقة 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>

ملاحظة: نظرت إلى هذا السؤال المماثل ، لكن يبدو أن هناك بعض الاختلافات ، ولم أتمكن من إيجاد الحلول المناسبة لي.





flexbox