JSFiddle - React, Tailwind, and code Playground

by zicai

HTML

<!-- 没有设置宽度的块级盒子，如果没有触发layout，会尽量让自己填满剩余的空间，即使设置了padding，还是会和padding一起填满父级盒子的宽度。这和设置宽度为100%是不一样的。 -->
<div class="parent">
    <div class="child_one">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum rerum ex debitis 
    </div>
    <div class="child_two">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa aspernatur consectetur quobitis eaque adipisci doloremque at.
    </div>
</div>

CSS

.parent{
    width: 200px;
    border:2px solid green;
}
.child_one{
    padding: 20px;
    background-color:red;
}
.child_two{
    padding: 20px;
    width: 100%;
    background-color:yellow;
}