Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box.
The overflow property specifies whether content of a block container element is clipped when it overflows the element's box.
Value Meaning:
<div>
<blockquote>
<p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
<cite>- Groucho Marx</cite>
</blockquote>
</div>
blockquote {
width: 125px;
height: 100px;
margin-top: 50px;
margin-left: 50px;
border: thin dashed black
}
cite {
display: block;
text-align: right;
border: none
}
div {
width: 100px;
height: 100px;
border: thin solid red;
}
<div>
<blockquote>
<p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
<cite>- Groucho Marx</cite>
</blockquote>
</div>
blockquote {
width: 125px;
height: 100px;
margin-top: 50px;
margin-left: 50px;
border: thin dashed black
}
cite {
display: block;
text-align: right;
border: none
}
div {
width: 100px;
height: 100px;
border: thin solid red;
overflow:hidden;
}
.outer-div {
width:200px;
text-align:right;
white-space:nowrap;
border: 1px solid #ddd;
overflow:auto;
}
.inner-div {
float:right;
}
<div class="outer-div">
<div class="inner-div">
<p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
</div>
</div>