JSFiddle - React, Tailwind, and code Playground

by ericx1023

HTML

<!-- 內容說明
一個div底下包了兩個div, div.img flaot左, 右邊div的寬度未設定, 但設定了overflow:hidden
放進了太大的圖,  -->
<div class="out">
    <div class="img"></div>
    <div class="block-formatting-context">
       <img src="http://previews.123rf.com/images/dl1on/dl1on1102/dl1on110200002/8878199-Two-One-Color-Old-Grunge-Engraved-Banners--Stock-Vector-angel-wing-silhouette.jpg" alt="">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid officia repellat vel cumque quisquam suscipit quia ducimus tenetur similique repudiandae iste dolores facilis eveniet. Dolor iure ducimus autem ipsam consequatur.</p>
    </div>
</div>

CSS

.out {
    width: 500px;
}

.block-formatting-context {
    padding-left: 15px;
    border: 1px solid #f00;
    /* 將此行解除註解後執行 */
    overflow:hidden; 
}
.img {
    float: left;
    background: pink;
    width: 100px;
    height: 100px;
}