JSFiddle - React, Tailwind, and code Playground

by ansonhoyt

HTML

<p>1: Normal Box</p>
<div class="box">
    Content
</div>

<p>2: With Overflowing Content</p>
<div class="box">
    <div class="content">Content</div>
</div>

<p>3: With Overflowing Image</p>
<div class="box">
<img src="http://farm3.staticflickr.com/2360/2436693915_86a2f63240_m.jpg">
</div>

CSS

.box {
    border: 1px solid black;
    border-radius: 8px 8px 0 0;
    
    /* Solution to content extending outside of box */
    overflow: hidden;
    
    /* Make it easier to see... */
    display: inline-block;
    background-color: rgb(100,100,255);
    min-width: 100px;
    min-height: 100px;
}
.box > .content {
    background-color: red;
}
body { background-color: pink; }