Элементы Flex, расширяющиеся до высоты содержимого

Я использую макет flexbox для размещения трех div в столбце, так что каждый div имеет одинаковую высоту. Каждый div отображает полосу прокрутки, если ее содержимое слишком велико. Я хотел бы, чтобы каждый раздел расширялся только до высоты его содержимого, но в настоящее время происходит то, что каждый раздел всегда имеет одинаковую высоту, независимо от содержимого в нем.Элементы Flex, расширяющиеся до высоты содержимого

Если контейнер равен 900px, каждая секция должна быть 300 пикселей, а если содержание секции составляет более 300 пикселей в высоту, должна появляться полоса прокрутки. Однако, если содержание let говорит, что средняя секция имеет высоту всего 100 пикселей, этот раздел должен быть только 100px, а остальные разделы должны заполнять оставшееся пространство, поэтому каждый из них будет иметь высоту 400 пикселей.

Пример: http://jsfiddle.net/x6puccbh/2/

Как вы можете видеть в этом примере, средняя часть является такой же высоты, как и другие разделы, но я хотел бы, чтобы только быть столь же высоким, как его содержание. Возможно ли использование гибкой компоновки?

<div class="container"> 
    <div class="panel"> 
     <div class="section"> 
      <div class="header">HEADER</div> 
      <div class="content">content<br>content<br>content<br>content 
       <br>content<br>content<br>content<br>content 
       <br>content<br>content<br>content<br>content</div> 
     </div> 
     <div class="section"> 
      <div class="header">HEADER</div> 
      <div class="content">content</div> 
     </div> 
     <div class="section"> 
      <div class="header">HEADER</div> 
      <div class="content">content<br>content<br>content<br>content 
       <br>content<br>content<br>content<br>content 
       <br>content<br>content<br>content<br>content 
      </div> 
     </div> 
    </div> 
</div> 

.container { 
    height: 300px; 
} 

.panel { 
    display:flex; 
    flex-direction: column; 
    height: 100%; 
} 

.header { 
    height: 15px; 
    text-align: center; 
    flex-shrink: 0; 
} 

.section { 
    flex-grow: 1; 
    flex-shrink: 1; 
    flex-basis: auto; 
    height: 100%; 
    border: 1px solid red; 
    display: flex; 
    flex-direction: column; 
} 

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

источник

2015-05-26 user2030458

Если вы меняете свои высоты на авто, я думаю, что он делает то, что вы просите. Пример и текущий код ниже. Дайте мне знать, если это не то, что вы собирались для

http://plnkr.co/edit/MMjXmANacvZvHofXzYoL

.container { 
    height: 300px; 
} 

.panel { 
    max-height: 100%; 
    display:flex; 
    flex-direction: column; 
} 

.header { 
    height: 15px; 
    text-align: center; 
    flex-shrink: 0; 
} 

.section { 
    border: 1px solid red; 
    display: flex; 
    flex-direction: column; 
    max-height: 33%; 
    flex-grow: 1; 
} 

.content { 
    overflow-y: auto; 
}

источник

2015-05-26 14:52:24

Это то, что я ищу, однако мне нужно, чтобы каждый раздел отображал полосу прокрутки, если содержимое слишком велико. В вашем коде контейнер составляет 300 пикселей, но общая высота содержимого составляет 500 пикселей, но пока нет полос прокрутки. – user2030458

Если вы добавите максимальную высоту на панель, она все равно сохранит относительные размеры, сохранив общий контейнер на 300 пикселей. Вы можете добавить min-height в контент, чтобы он отображал минимальный объем контента. –

На самом деле не должно быть максимальной высоты для панели, я хочу, чтобы панель растянулась на всю высоту контейнера. Кроме того, содержание также не должно иметь минимальной высоты. – user2030458

Попробуйте установить свойство макс высоты на контейнере вы не хотите, чтобы получить слишком большой, но использовать VH, а не% (как в 75vh не 75%).

источник

2017-04-04 16:11:39

Элементы Flex, расширяющиеся до высоты содержимого

ответ

Смежные вопросы