JSFiddle - React, Tailwind, and code Playground

by esantiagovieira

HTML

<div class="container">
  <div class="item-a">
    Grid child 1:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat, tortor ut luctus semper, turpis dui consequat ipsum, vitae gravida nunc purus non arcu. Proin congue, turpis eget tempor tristique, turpis eros lobortis nibh, lobortis suscipit nisi mi ut dolor. Duis aliquam interdum ipsum. Aenean id metus quis quam mollis interdum. Curabitur vel lectus a quam mollis consequat. Sed auctor efficitur viverra. Aenean iaculis enim diam, eget sodales augue consequat volutpat. Praesent placerat mi diam, sed elementum lacus eleifend in. Nulla sit amet dolor at tortor aliquet semper. Integer et sodales elit, quis pulvinar felis. Suspendisse et sodales ipsum. Aenean sem quam, tempor a metus sed, malesuada aliquet sapien. Nullam aliquam magna at congue sollicitudin.
  </div>

  <div class="item-b">
    Grid Child 2
  </div>
</div>

CSS

.container{
  box-sizing: border-box;
  height: 350px;
  max-width: 300px;
  border: 3px dotted gray;
  overflow: hidden;
  display: grid;
  grid-template-areas:
  'item-a'
  'item-b';
  grid-template-rows: 1fr 120px;
  grid-template-columns: 200px;
  background-color: grey;
  
  .item-a{
    grid-area: item-a;
    border: 3px dotted green;
    overflow-x: auto;
    overflow-y: hidden;
    width: 600px;
    background-color: green;
  }
  
  .item-b{
    grid-area: item-b;
    border: 3px dotted yellow;
    background-color: yellow;
  }
}