Блог

Главная - Вопросы по программированию - CSS — увеличьте высоту и включите переполнение

CSS — увеличьте высоту и включите переполнение

#css #flexbox

#css #flexbox

Вопрос:

Проблема: не удается включить переполнение для дочернего элемента flex grow.

Пример:

  • Div 1 flex увеличивается до содержимого.
  • Div 2 flex увеличивается, чтобы заполнить доступное
  • Div 2.1 находится внутри Div 2 и выше, поэтому я хочу включить переполнение, но оно продолжает расти и увеличивать высоту тела.
  • Div 3 flex увеличивается до содержимого

Как мне включить увеличение div 2.1 до размера Div 2, но также включить переполнение?

HTML

 <div class="container">
 <div class="flex-fitcontents">
    <p> "Fit contents" </p>
 </div>
 <div class="flex-fillremaining">
    <p> "Take up remaining space" </p>
    <div class="flex-fillparent">
        <p> "Fill parent" </p>
        <p> "Content" </p>        
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "Content" </p>
        <p> "This content should be in the overflow" </p>
    </div>
 </div>
 <div class="flex-fitcontents">
    <p> "Fit contents" </p>      
 </div>    
</div>

CSS

 .container {
    height: 500px;
    width: 500px;
    display: flex;
    flex-direction: column;
}
.flex-fitcontents {
    flex: 0 1 auto;
    background-color: blue;
}
.flex-fillremaining {
    position: relative;
    flex: 1 1 auto;
    background-color: red;
}
.flex-fillparent {
    flex: 1 1 auto;
    background-color: green;
    overflow: auto;
}

Скрипка JS

Комментарии:

1. Вы имеете в виду что-то вроде этого jsfiddle.net/cw0bhoa9 ?

Ответ №1:

Если я правильно понял, вы имеете в виду что-то вроде следующего примера. Установка высоты в flex-fillparent решает проблему.

 .container {
  height: 500px;
  width: 500px;
  display: flex;
  flex-direction: column;
}

.flex-fitcontents {
  flex: 0 1 auto;
  background-color: blue;
}

.flex-fillremaining {
  position: relative;
  flex: 1 1 auto;
  background-color: red;
}

.flex-fillparent {
  flex: 1 1 auto;
  background-color: green;
  overflow: auto;
  height: 3rem;
}  
 <div class="container">
  <div class="flex-fitcontents">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eleifend bibendum rutrum. Duis cursus eros eget ornare efficitur. Aliquam pellentesque, arcu sed euismod pulvinar, quam enim commodo est, sit amet tristique justo arcu non tortor.
      In nec dignissim tortor. Pellentesque nibh justo, suscipit ut tempor at, mollis vitae purus. Aenean sollicitudin scelerisque blandit. In hac habitasse platea dictumst. </p>
  </div>
  <div class="flex-fillremaining">
    <p> "Take up remaining space" </p>
    <div class="flex-fillparent">
      <p> "Fill parent" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "Content" </p>
      <p> "This content should be in the overflow" </p>
    </div>
  </div>
  <div class="flex-fitcontents">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eleifend bibendum rutrum. Duis cursus eros eget ornare efficitur. Aliquam pellentesque, arcu sed euismod pulvinar, quam enim commodo est, sit amet tristique justo arcu non tortor.
      In nec dignissim tortor. Pellentesque nibh justo, suscipit ut tempor at, mollis vitae purus. Aenean sollicitudin scelerisque blandit. In hac habitasse platea dictumst. </p>
  </div>
</div>

Комментарии:

1. Есть ли способ сделать это, не устанавливая высоту fillparent ? Похоже, что это решение делает поле переполнения очень маленьким и не заполняет поле заполнения.

Ответ №2:

Вы можете попробовать добавить автоматическое переполнение в flex-fillremaining, чтобы у его дочерних элементов была полоса прокрутки.

 .flex-fillremaining {
  position: relative;
  flex: 1 1 auto;
  background-color: red;
  overflow: auto;
}