There is a code:

<head> <style> .a{ height: 300px; width: 200px; background-color: red; position: inherit; } .b{ height: 200px; width: 200px; background-color: blue; position: absolute; top: 50px; left: 100px; } </style> </head> <body> <div class="a"> <div class="b"></div> </div> </body>

you need to hide the protruding part of block B outside of block A without truncating its width, like this:

example

so that the protruding part could not be seen.

  • thanks @Doofy, what you need - perfect

1 answer 1

.a { overflow: hidden; } .a { overflow: hidden; } .b { position: relative; } .b { position: relative; }

 .a { height: 300px; width: 200px; background-color: red; position: inherit; overflow: hidden; } .b { height: 200px; width: 200px; background-color: blue; position: relative; top: 50px; left: 100px; } 
 <div class="a"> <div class="b"></div> </div>