I use the details tag when creating a spoiler. Under it open pictures, located vertically. When opened, the spoiler closes the remaining content. Tell me, please, how to make the opening of the spoiler increase the block with pictures without affecting the remaining content.

 .block { background-image: url("../img/3_bg.png"); height: 100%; } .spoiler { background-color: gray; display: flex; flex-direction: column; position: relative; } 
 <section class="block"> <details class="spoiler"> <img src="img/screen/9.jpg" height="400" /> <img src="img/Screen/8.jpg" height="400" /> <img src="img/Screen/7.jpg" height="400" /> </details> </section>

Closed due to the fact that off-topic participants Vadim Ovchinnikov , aleksandr barakin , ermak0ff , user194374, fori1ton 1 Feb '17 at 8:06 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • "The question is caused by a problem that is no longer reproduced or typed . Although similar questions may be relevant on this site, solving this question is unlikely to help future visitors. You can usually avoid similar questions by writing and researching a minimum program to reproduce the problem before publishing the question. " - Vadim Ovchinnikov, aleksandr barakin, ermak0ff, Community spirit, fori1ton
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • Obviously your block has position: absolute. You need to find this style in css and remove. - Crantisz
  • No, it is: position: relative; - Kira
  • @Kira give an example code. - Vadizar
  • @Vadizar led - Kira
  • This question is closed due to "Off Topic" → "The question is caused by a problem that is no longer reproduced, or a typographical error.". - Vadim Ovchinnikov

1 answer 1

Your code works as it should, see:

 .a { background-image: url("../img/3_bg.png"); height: 100%; } .b{ background-color: gray; display: flex; flex-direction: column; position:relative; } 
 <section class="a"> <details class="b"> <img src="img/screen/9.jpg" height="400" /> <img src="img/Screen/8.jpg" height="400" /> <img src="img/Screen/7.jpg" height="400" /> </details> </section> 123

If the problem is not reproduced , we will not be able to help.