如何阻止子段落在 css 网格内拉伸父 div

Question

I have the following simple jsx code for a template page with a four column layout (2 columns for padding and two for a content-left and content-right section). One column contains the content pulled from a CMS and the other contains images, also pulled from the same CMS. I am using the grid system for the layout.

return(
        <div className="container">

            <div className="header">
              <Header pageTitle="My Recent Work"/>
            </div>

              <div className="pad-l"></div>
              
                <div className="content-left">
                  <h1>{props.data.contentfulProject.projectTitle}</h1>
                  <h3>About the project</h3>
                  <div className="jsonData">
                  {documentToReactComponents(props.data.contentfulProject.postDescription.json,options)}
                  </div>
                </div>

                <div className="content-right">

                </div>

              <div className="pad-r"></div>
        </div>
    )
}

Which is styled using css grid as

body{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

.content-left{
    grid-area: 'content-left';
}

.content-right{
    grid-area: 'content-right';
}

.pad-l{
    grid-area: 'pad-l';
    content: '';
}

.pad-r{
    grid-area: 'pad-r';
    content: '';
 
}

.container{
    background: #fff;
    display: grid;
    grid-template-areas: "header header header header"
    "pad-l content-left content-right pad-r";
}

.header{
    grid-area: header;
}

.content-left h1{
    padding-top: 2rem;
    color:#5297e6;
}

The paragraph elements which are dynamically inserted into the div with class name "jsonData" appear to be stretching the parent div to the full width of the page as shown below:

What I'm trying to achieve is something like what is shown below where the paragraph element width will fit into the div content-left which is part of a four column grid spaced 1fr 1fr 1fr 1fr . I tried setting the parent element to display as inline-block and the child element to display as flex-grow as suggested here however this wasn't quite what I was looking for. How can I make the grid columns inflexible and the paragraphs stretch to the width of the grid columns rather?

Answer 1

I was dealing with it right now. The only option that suited me was to set a fixed parent width