Good day how to stretch div.cooking over the remaining height of the parent div.recipe_slider_item_decr ?

 .recipe_slider_item_wrap{ height: 915px } .recipe_slider_item_decr{ height: 100% } 
 <div class="recipe_slider_item_wrap"> <div class="recipe_slider_item_decr"> <div class="recipe_slider_item_header"> <h2>Рецепт котлет для годовалого малыша</h2> <p>В правилах здорового питания рекомендуется отказаться от жарки.</p> <div class="underline"></div> <p>Приготовление куриных котлет для детей от года по этому рецепту сделает прием пищи здоровым.</p> </div> <div class="recipe_slider_item_ingredients"> <p>Для его приготовления возьмите:</p> <ul> <li>800 г куриное мясо (грудка);</li> <li>150 г овсяные хлопья;</li> <li>2 крупные луковицы;</li> <li>2 зубка чеснок;</li> </ul> </div> <div class="cooking" id="scroll"> <p>Все компоненты нужно перекрутить с помощью мясорубки. Из подсоленного фарша формируются котлетки. К фаршу добавляют измельченную зелень (петрушку, укроп). Яйцо можно не добавлять, так как овсяные хлопья служат хорошим связующим. Без него котлеты получаются более воздушными, мягкими. Можно приступать к запеканию. Керамические формы нужно заполнить водой на полсантиметра и выложить сформированные котлеты. Закрытые сверху фольгой формы помещают в нагретую до 180–200 градусов духовку и запекают.</p> <p></p> </div> </div> </div>

  • Is it possible to call baked meat cutlets? Better for a couple! And in your ingredients about greens nothing is said, a flaw. - Klimenkomud
  • @Klimenkomud as if this is the end result. I just duplicated the slides and did not completely edit it, I don’t need to tell me if the contents of the text are correct, it’s like another question - Alexey Alpatov
  • Yes, you have actually found the answer, it's just a joke. - Klimenkomud

2 answers 2

Can use flex

 .recipe_slider_item_decr{ height: 915px; display:flex; flex-direction:column; border:1px solid #000; } .recipe_slider_item_header,recipe_slider_item_ingredients{ flex-shrink:0 } .cooking{ flex:1 0 auto; background-color:#cda; /*для наглядности*/ } 
 <div class="recipe_slider_item_wrap"> <div class="recipe_slider_item_decr"> <div class="recipe_slider_item_header"> <h2>Рецепт котлет для годовалого малыша</h2> <p>В правилах здорового питания рекомендуется отказаться от жарки.</p> <div class="underline"></div> <p>Приготовление куриных котлет для детей от года по этому рецепту сделает прием пищи здоровым.</p> </div> <div class="recipe_slider_item_ingredients"> <p>Для его приготовления возьмите:</p> <ul> <li>800 г куриное мясо (грудка);</li> <li>150 г овсяные хлопья;</li> <li>2 крупные луковицы;</li> <li>2 зубка чеснок;</li> </ul> </div> <div class="cooking" id="scroll"> <p>Все компоненты нужно перекрутить с помощью мясорубки. Из подсоленного фарша формируются котлетки. К фаршу добавляют измельченную зелень (петрушку, укроп). Яйцо можно не добавлять, так как овсяные хлопья служат хорошим связующим. Без него котлеты получаются более воздушными, мягкими. Можно приступать к запеканию. Керамические формы нужно заполнить водой на полсантиметра и выложить сформированные котлеты. Закрытые сверху фольгой формы помещают в нагретую до 180–200 градусов духовку и запекают.</p> <p></p> </div> </div> </div>

  • Everything works, then the question appeared how to add a div.cooking scroll to it if its content exceeds the size in height? - Alexey Alpatov
  • overflow-y: scroll; does not work in this case, and the boundaries of this diva begin to stretch out on content - Alexey Alpatov
  • Set max-height for div.cooking and overflow-y: auto. - zhurof

To stretch the div.cooking over the remaining height - just set the height above 70%. At parent div it is possible to add overflow: hidden in case something tries to get out.

  • If you want to stretch the content, then you need to do a little differently. - SoVerk
  • div.cooking will be added to the scroll if its contents exceed the height, and above 70% does not fit because the diva’s borders go beyond the lower div.recipe_slider_item_decr boundary, but must be exactly at its lower boundary - Alexey Alpatov
  • Well, the overflow: hidden property truncates everything that comes out of the div. If you set 67% then it should be exactly the size of the parent div - SoVerk
  • well, and if the content above .cooking is less or more, then everything will climb again, the fact is that this is a slider and on one slide one distance to the lower border of the parent div in another slide is another distance, that’s the problem - Alexey Alpatov
  • Then I recommend using the percentage ratio when specifying the size. Including the height of the parent div - SoVerk