Предельная высота гибкого элемента в макете flexbox

Я пытаюсь создать раскладку flexbox, как показано на рисунке jsfiddle. Это HTML:Предельная высота гибкого элемента в макете flexbox

<div class="container"> 
    <div class="header"> 
    header 
    </div> 
    <div class="content"> 
    </div> 
    <div class="footer"> 
    footer 
    </div> 
</div>

Это CSS:

.container { 
    background-color: green; 
    height: 300px; 
    max-height: 300px; 
    display: flex; 
    flex-direction: column; 
} 

.header { 
    background-color: yellow; 
    flex: 0 0 50px; 
} 

.content { 
    background-color: blue; 
    flex: 0 0 90%; 
    overflow: scroll; 
} 

.footer { 
    background-color: red; 
    flex: 0 0 40px; 
}

И это работает, но я хотел бы также ограничить размер всего макета не выходят за рамки элементов «» .container фиксированной высота.

Как я могу это достичь?

Спасибо, Джеральд

источник

2016-05-21 nutrina

Я не ясно вам вопрос. – WorkWe

Вам просто нужно сделать .content заполнить все доступное пространство внутри контейнера добавляя к нему flex: 1;.

Рабочий пример:

var i; 
 
for (i = 0; i < 100; i++) { 
 
    $(".content").append("<div>hello " + i + "</div>"); 
 
}

.container { 
 
    background-color: green; 
 
    height: 300px; 
 
    max-height: 300px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    border:3px solid black; 
 
} 
 

 
.header { 
 
    background-color: yellow; 
 
    flex: 0 0 50px; 
 
} 
 

 
.content { 
 
    background-color: blue; 
 
    flex: 1; 
 
    overflow: scroll; 
 
} 
 

 
.footer { 
 
    background-color: red; 
 
    flex: 0 0 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="header"> 
 
    header 
 
    </div> 
 
    <div class="content"> 
 
    </div> 
 
    <div class="footer"> 
 
    footer 
 
    </div> 
 
</div>

jsFiddle: https://jsfiddle.net/azizn/0aumg6b0/

источник

2016-05-22 08:14:48 Aziz

заменить старый код контейнера в таблице стилей с этим один и посмотреть, если он работает

<style> 
     .container { 
      background-color: green; 
      height: 300px; 
      max-height: 300px; 
      display: flex; 
      flex-direction: column; 
      overflow: auto; 
     } 

     .header { 
      background-color: yellow; 
      flex: 1; 
      overflow: scroll; 
      height: 100px; 
     } 

     .content { 
      background-color: blue; 
      flex: 7; 
      overflow: scroll; 
     } 

     .footer { 
      background-color: red; 
      flex:1; 
     } 

    </style> 

</head> 

<body> 

    <div class="container"> 
     <div class="header"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, quae beatae esse, impedit est distinctio ducimus dignissimos suscipit similique quos labore libero ab molestiae, velit eveniet, quo. Odit, architecto, totam! 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nisi temporibus, rem fugiat dolorum aliquid aspernatur quibusdam quam aut nihil et dignissimos animi minima laboriosam ipsum culpa quisquam repellat eum! 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, quae beatae esse, impedit est distinctio ducimus dignissimos suscipit similique quos labore libero ab molestiae, velit eveniet, quo. Odit, architecto, totam! 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nisi temporibus, rem fugiat dolorum aliquid aspernatur quibusdam quam aut nihil et dignissimos animi minima laboriosam ipsum culpa quisquam repellat eum! 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, quae beatae esse, impedit est distinctio ducimus dignissimos suscipit similique quos labore libero ab molestiae, velit eveniet, quo. Odit, architecto, totam! 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nisi temporibus, rem fugiat dolorum aliquid aspernatur quibusdam quam aut nihil et dignissimos animi minima laboriosam ipsum culpa quisquam repellat eum! 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, quae beatae esse, impedit est distinctio ducimus dignissimos suscipit similique quos labore libero ab molestiae, velit eveniet, quo. Odit, architecto, totam! 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nisi temporibus, rem fugiat dolorum aliquid aspernatur quibusdam quam aut nihil et dignissimos animi minima laboriosam ipsum culpa quisquam repellat eum! 
     </div> 
     <div class="content"> 
     </div> 
     <div class="footer"> 
      footer 
     </div> 
    </div>

источник

2016-05-21 05:41:13

Переполнение: авто не помогает мне, это только делает прокрутку всего макета ... И я хочу, чтобы контент прокручивался, имея общую высоту, ограниченную .container. – nutrina

проверить отредактированный ответ. Я добавил какой-то фиктивный текст, чтобы показать прокрутку

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

Предельная высота гибкого элемента в макете flexbox

ответ

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