How to use Horizontal scroll container inside a grid item? - html

Question

Unable to use Horizontal scroll container inside a grid item. Grid item width gets expanded when a scroll container is inserted. Even scroll container unable to scroll horizontally. When I define a fixed width for the scroll container then only it is working but I want a responsive result. Can anyone please help me with this?
Here is the code snippet.
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-gap: 10px;
}
.grid-container>div {
border: 2px dotted black;
padding: 10px;
}
.code_container {
padding: 10px;
margin: 10px 0;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color: black;
color: white;
}
.code {
display: inline-block;
}
<div class="grid-container">
<div class="left">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
eos dolorem suscipit commodi.
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorem veniam tempore eius aliquid!
<div class="code_container">
<div class="code">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, amet aperiam libero cumque sit quod
voluptatem eligendi. Odio illo voluptas beatae omnis voluptatem, ex consectetur vitae error ad,
officia iste, debitis molestiae explicabo repellat saepe nemo cupiditate nisi. Asperiores dolorem
inventore ipsa, deleniti, consequuntur explicabo, repellendus laboriosam aut minus dolore itaque
magni incidunt odit porro ipsum. Sequi, esse! At suscipit modi laborum ex aliquam recusandae
necessitatibus distinctio, animi quo? Soluta labore enim fugiat, suscipit cumque facere impedit
iusto quaerat neque perspiciatis quas molestiae exercitationem tempora, ad cum obcaecati. Aperiam
eos, quae unde provident illum doloribus excepturi optio laudantium quidem nulla!
</div>
</div>
</div>
<div class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
eos dolorem suscipit commodi.
</div>
</div>

Answer 1

Unless content is set to absolute, parent div will keep growing to fit its contents size. This will make your black box (code container) grow. To prevent it, set positioning of code_container's child(.code) to absolute.
.code {
display: inline-block;
position: absolute;
}
But now, code's content jumps out from code container. To prevent this, give .code a fixed width. In your case, give 100%.
.code {
display: inline-block;
position: absolute;
width: 100%;
}
But still nothing will change because it takes it's 100% width compared to the width of the body. To prevent this, set .code's parent (.code_container) position: relative;. Now because .code's parent is positioned relative, code will calculate it's 100% width relative to .code_container's width.
Now you should be able to do horizontal scrolling and it is responsive! But the horizontal scroll bar is covering the content. So give .code_container a min-height (about 30px in your case).
Tested in chrome and firefox. Works fine!
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-gap: 10px;
}
.grid-container>div {
border: 2px dotted black;
padding: 10px;
}
.code_container {
padding: 10px 20px;
margin: 10px 0;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color: black;
color: red;
position: relative;
min-height: 30px;
}
.code {
display: inline-block;
position: absolute;
width: 100%;
}
<div class="grid-container">
<div class="left">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio eos dolorem suscipit commodi.
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorem veniam tempore eius aliquid!
<div class="code_container">
<div class="code">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, amet aperiam libero cumque sit quod voluptatem eligendi. Odio illo voluptas beatae omnis voluptatem, ex consectetur vitae error ad, officia iste, debitis molestiae explicabo repellat saepe
nemo cupiditate nisi. Asperiores dolorem inventore ipsa, deleniti, consequuntur explicabo, repellendus laboriosam aut minus dolore itaque magni incidunt odit porro ipsum. Sequi, esse! At suscipit modi laborum ex aliquam recusandae necessitatibus
distinctio, animi quo? Soluta labore enim fugiat, suscipit cumque facere impedit iusto quaerat neque perspiciatis quas molestiae exercitationem tempora, ad cum obcaecati. Aperiam eos, quae unde provident illum doloribus excepturi optio laudantium
quidem nulla!
</div>
</div>
</div>
<div class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio eos dolorem suscipit commodi.
</div>
</div>

Answer 2

Finally I have resolved the issue. Just need to include these lines inside container:
min-width: 0;
overflow: auto;
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-gap: 10px;
}
.grid-container>div {
border: 2px dotted black;
padding: 10px;
/* Auto scroll horizontally */
min-width: 0;
overflow: auto;
}
.code_container {
padding: 10px;
margin: 10px 0;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color: black;
color: white;
}
.code {
display: inline-block;
}
<div class="grid-container">
<div class="left">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
eos dolorem suscipit commodi.
</div>
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorem veniam tempore eius aliquid!
<div class="code_container">
<div class="code">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, amet aperiam libero cumque sit quod
voluptatem eligendi. Odio illo voluptas beatae omnis voluptatem, ex consectetur vitae error ad,
officia iste, debitis molestiae explicabo repellat saepe nemo cupiditate nisi. Asperiores dolorem
inventore ipsa, deleniti, consequuntur explicabo, repellendus laboriosam aut minus dolore itaque
magni incidunt odit porro ipsum. Sequi, esse! At suscipit modi laborum ex aliquam recusandae
necessitatibus distinctio, animi quo? Soluta labore enim fugiat, suscipit cumque facere impedit
iusto quaerat neque perspiciatis quas molestiae exercitationem tempora, ad cum obcaecati. Aperiam
eos, quae unde provident illum doloribus excepturi optio laudantium quidem nulla!
</div>
</div>
</div>
<div class="right">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam delectus ipsum quidem recusandae, optio
eos dolorem suscipit commodi.
</div>
</div>