JSFiddle - React, Tailwind, and code Playground

by AlexandrAbakumov

HTML

<div class="app-root">
    <div class="cntnr-top">
        <div class="cntnr-app">
            <!-- <div class="el-1"></div> -->
            <div class="ditat-navigation">
                <div class="cntnr-nav">jdfghdfkghdfklghdlkghdlfkghlkdhfgldhfgldkfhglkdfhgkldfhgkldhfgkldfg</div>
            </div>
        </div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}

.app-root {
    display: flex;
    flex-direction: column;    
}

.cntnr-top {
    display: flex;
    overflow-x: scroll;
    width: 400px;
}

.cntnr-app {
    background-color: blue;
    display: flex;
    flex-direction: column;
    /*overflow-x: auto;*/
}

.el-1 {
    background-color: red;
    display: flex;
    height: 50px;
    width: 300px;
}

.ditat-navigation {
    background-color: green;
    display: flex;
    height: 100px;
    /*width: 500px;*/
}