JSFiddle - React, Tailwind, and code Playground

by infous

HTML

<div class="a">
    <div class="b">
        <div class="c"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis neque iste, officia, aliquid aut repellat unde itaque esse sit voluptas consectetur nulla placeat! Fugiat quia quidem, quam impedit aliquam repellendus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis neque iste, officia, aliquid aut repellat unde itaque esse sit voluptas consectetur nulla placeat! Fugiat quia quidem, quam impedit aliquam repellendus.</p>
    </div>
</div>

<div class="aa">
    <div class="bb">
        <div class="cc"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis neque iste, officia, aliquid aut repellat unde itaque esse sit voluptas consectetur nulla placeat! Fugiat quia quidem, quam impedit aliquam repellendus.</p>
    </div>
</div>

<!-- http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue/6433475#6433475 -->

CSS

.a {
    position: absolute;
    background: #eee;
    
    top: 10px;
    left: 10px;
    bottom: 10px;
    
    z-index: 9000;
}

.b {
    background: #ddd;
    height: 100%;
    width: 200px;
    overflow-y: auto;    
}

.c {
    background: #f00;
    height: 30px;
    position: absolute;
    left: 100%;
    width: 200px;
}

/* --- */

.aa {
    position: absolute;
    background: #eee;
    
    top: 10px;
    right: 10px;
    
    white-space: nowrap;
    z-index: 9000;
}

.bb {
    background: #ddd;
    height: 50px;
    width: 300px;
    overflow-x: auto;    
}

.cc {
    background: #f00;
    height: 200px;
    position: absolute;
    top: 100%;
    width: 20px;
}