I'm trying to get the cyan box to scroll horizontally instead of triggering a horizontal scrollbar on the page.
It seems to break when I try using a grid layout; I had to horizontally scrolling before when I didn't use a grid.
How can I fix this? .page-wrap should fill the whole window and add vertical scrollbar as needed. Only the .boxs should scroll horizontally.
html {
overflow: hidden;
}
.page-wrap {
display: grid;
grid-template-areas:
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 60px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}
.sidebar {
background-color: green;
grid-area: sidebar;
}
.footer {
background-color: red;
grid-area: footer;
}
.main {
background-color: yellow;
grid-area: main;
}
.box {
background-color: cyan;
margin: 10px;
overflow-x: scroll;
}<div class="page-wrap">
<div class="sidebar">sidebar</div>
<div class="main">
<div class="box">
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, modi laudantium facilis. Cum quasi dolore quam doloribus reprehenderit illum nostrum id quas ea. Nostrum adipisci dolor nulla veniam exercitationem ipsa.</td>
<td>Accusamus deserunt voluptatibus rem, aspernatur enim dolores, amet illum accusantium! Tempora, repellendus, fuga. Ex, consectetur mollitia reprehenderit qui, consequuntur ipsam maiores excepturi sapiente tempore odit repudiandae facere incidunt! Vero, beatae.</td>
<td>Et minus eaque corrupti voluptas, earum ex non similique. Officiis a dignissimos veritatis quas provident sunt? Fuga vel officia qui, numquam eos sint, totam aspernatur, commodi quis, temporibus animi excepturi!</td>
<td>Natus quaerat, sint nemo quia laudantium dolorem asperiores deserunt neque porro esse iusto reprehenderit et assumenda ipsum saepe consequuntur soluta officiis illum maiores cumque quos voluptate expedita tenetur eum autem!</td>
<td>Asperiores ducimus accusantium aliquid nemo aliquam fugiat culpa maxime repudiandae pariatur minus. Eum incidunt iste molestias officiis sunt nostrum facilis velit. Reprehenderit quis aut officia quas beatae assumenda esse asperiores.</td>
<td>Architecto, nam consequuntur odit distinctio! Suscipit fuga nam reprehenderit, nostrum modi provident iusto aperiam alias qui. Optio repudiandae reiciendis, omnis esse maiores! A blanditiis ducimus voluptate nobis exercitationem. Temporibus, vel!</td>
<td>Similique et est omnis fuga, ad earum sapiente. Nam qui est quidem. Dignissimos amet harum voluptate a, sint culpa autem et neque, natus quod cum eos laudantium molestias, dolorem optio.</td>
<td>Saepe aspernatur consequuntur sint nisi dolores nihil ab repudiandae, odio dolor, assumenda culpa corporis fugiat ullam officia quibusdam eaque enim, harum voluptatem eveniet reprehenderit natus consectetur deleniti nesciunt et! Omnis!</td>
<td>Nihil quas quod numquam ut fugiat doloremque repudiandae animi iusto. Ullam quidem ipsa dolorem quos veritatis adipisci quisquam obcaecati culpa et consequatur, aspernatur unde eligendi rerum labore ab odit asperiores.</td>
<td>Hic, aliquam, harum? Harum tempora accusantium animi ratione id perspiciatis quasi maiores iste odio quisquam, adipisci, laudantium cupiditate voluptatem mollitia soluta sunt eveniet facere quibusdam aspernatur? Suscipit obcaecati dolorum eligendi.</td>
<td>Possimus natus, dignissimos vero nesciunt cum voluptatibus reiciendis commodi maxime voluptates qui illo quia distinctio tempora perferendis fugit modi itaque, quis recusandae quisquam quos ullam alias! Voluptatum repellat mollitia incidunt.</td>
<td>Quod in ducimus, saepe obcaecati, eius vero ipsa ea cum reprehenderit velit sunt numquam eaque sapiente dolorem, possimus id nostrum natus eligendi accusamus nulla voluptatibus necessitatibus harum vitae. Dolorum, praesentium.</td>
<td>Ab iusto, dicta deleniti explicabo perspiciatis pariatur deserunt blanditiis vel accusantium. Tempore architecto fugit cum similique laudantium et veritatis id, quos deleniti eaque voluptatum laboriosam, natus commodi itaque veniam vel.</td>
<td>Dignissimos, quis excepturi, ratione nemo minima tenetur possimus. Quos eum placeat veniam voluptas, tempora, aliquam? Dolores ipsum obcaecati nisi itaque dolor, officiis quidem minima, nesciunt molestias facilis cupiditate repellat sequi.</td>
<td>Dolores asperiores quidem totam illo veniam! Natus architecto nulla et asperiores modi quaerat, sed! Quam cum rem voluptatibus, rerum pariatur deserunt fugit odit, totam blanditiis animi nulla nisi facilis saepe.</td>
<td>Quibusdam dolor explicabo soluta adipisci est quis aliquam tempora non, sint laudantium tempore minima inventore dolorum magni ad a rem magnam dignissimos expedita maxime numquam voluptas facere, quidem harum aliquid.</td>
<td>Facere dolorem, ullam quasi. Numquam alias maiores harum voluptate delectus quos totam architecto voluptatum, sapiente pariatur modi, autem culpa omnis facere commodi unde assumenda. Quaerat, rem deserunt. Beatae, voluptates, cum.</td>
<td>Magni pariatur eos quo perspiciatis ipsam a modi accusantium nulla fugiat officiis dolor ducimus hic, provident eius facilis quibusdam molestiae quasi, sunt, quis repellat nesciunt! Enim ipsum ducimus cumque placeat?</td>
<td>Recusandae porro, consectetur placeat, temporibus delectus nesciunt aliquid nam incidunt at ipsa accusantium hic maxime tempora dolorum! Totam reiciendis, consequatur deserunt eveniet natus, vitae ipsa voluptate repudiandae velit, quia aspernatur!</td>
<td>Et iusto ab repellat quae? Quas, ratione sapiente a, fuga voluptates, unde ullam dolores, fugit sint magnam perferendis ad quae. Magnam consequatur nisi quisquam, maiores quasi qui provident similique nobis.</td>
<td>Ab qui hic, incidunt consequuntur officia exercitationem laboriosam suscipit veritatis est deleniti, debitis reiciendis at quidem consequatur iure ut quisquam tempore delectus aut soluta sequi tenetur sed magnam nostrum. Ab?</td>
<td>Earum quis perspiciatis perferendis, rem, fugit cumque reiciendis! Porro consequatur quam consequuntur quaerat, atque praesentium adipisci fugit, dignissimos, ab labore reprehenderit provident temporibus, totam magnam illum pariatur deserunt alias cum!</td>
<td>Officiis sit quam vero nobis doloribus necessitatibus possimus. Veniam, totam! Illo magnam, ipsum consequuntur at, ipsam sit fuga rerum architecto eum libero officiis, nobis! Obcaecati incidunt, mollitia placeat eaque atque.</td>
<td>Nisi nam assumenda laudantium quos non quasi. Fuga enim, voluptatibus possimus tempora numquam dolores maiores, eum quaerat sit odit distinctio saepe optio aut accusamus explicabo, dolorem quidem consequatur. Maxime, similique!</td>
<td>Autem inventore expedita quibusdam ipsum. Consequuntur nulla in vero blanditiis deleniti dignissimos, earum eligendi voluptatibus, minus illo, perspiciatis doloremque nisi sed maiores tempora. Excepturi minima, officia incidunt vitae pariatur illo!</td>
<td>Sequi delectus dolorum, ea rem quis voluptatem accusantium quibusdam suscipit corrupti est laborum adipisci tenetur optio expedita inventore quam molestiae cupiditate totam. Rem sed, odit blanditiis eius quia vel eos.</td>
<td>Vero dolor nam quisquam reiciendis quibusdam id sapiente quia est veritatis facilis, expedita recusandae sequi iste tempora harum illum nihil. Amet laborum, accusamus soluta dolores et iure? Possimus, et? Iusto.</td>
<td>Ullam ipsum blanditiis obcaecati, rem aliquam voluptates fuga quo praesentium quia cum dignissimos debitis laboriosam itaque? Nostrum explicabo quae, rem praesentium accusantium dicta officia veritatis magni earum officiis. Inventore, ut.</td>
<td>Quisquam, ex, dolore. Voluptates porro eum, blanditiis ullam non sequi suscipit iste eius! Soluta, nam quia impedit veritatis laudantium id ea iure autem magnam sapiente, a modi omnis. Optio, animi!</td>
<td>Consequuntur amet, tenetur quidem consequatur doloremque distinctio ipsum minima, incidunt, fuga voluptatibus placeat quae autem recusandae quasi. Nihil, dolorum? Aliquid eligendi hic expedita saepe recusandae suscipit tempora tempore illum tenetur.</td>
</tr>
</table>
</div>
</div>
<div class="footer">footer</div>
</div>
