Изображение заполнение фиксированной высоты div

Question

Я застрял на css проблема.

У меня есть div с фиксированной высотой, 400px и внутри этого div есть переменный текст. И изображение, мне нужно изображение, чтобы заполнить пространство div. Текст изменится, поэтому пространство всегда будет разным, и все должно находиться внутри границ высоты.

Answer 1

Я нашел решение, используя display: flex и установив изображение на фоне div.

Вы можете увидеть код здесь: https://jsfiddle.net/ckryvuzm/

Я попытался с помощью display: table, но фиксированная высота 400px растет при изменении содержимого.

Answer 2

Определить ширину div до 100%, который содержит высоту 400 пикселей и отображение: flex и flex-direction: column.

Внутри сделать DIV изображения на гибком вырастали: 1.

И положил все содержимое внутри одного DIV, и сделать переполнение: авто, так как будет меньше содержания он не будет иметь свиток, и если контент растет по размеру, контент получит полосу прокрутки.

Вот сделал скрипку, которую я думаю, точно решить вашу проблему: https://jsfiddle.net/ABhimsaria/vj7bgzpb/2/

#container { 
    position: relative; 
    font-size: 20px; 
    height: 400px; 
    width:100%; 
    border:1px solid black; 
    height: 400px; 
    display: flex; 
    flex-flow: column; 

}