How to use Horizontal scroll container inside a grid item?

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

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>