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

Question

我有以下简单的 jsx 代码，用于具有四列布局的模板页面（2 列用于填充，两列用于内容左侧和内容右侧部分）。一列包含从 CMS 提取的内容，另一列包含同样从同一 CMS 提取的图像。我正在使用网格系统进行布局。

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>
    )
}

使用 css 网格作为样式

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;
}

动态插入到类名为“jsonData”的div中的段落元素似乎将父div拉伸到页面的整个宽度，如下所示：

我想要实现的是类似于下面显示的内容，其中段落元素宽度将适合 div content-left，它是间隔 1fr 1fr 1fr 1fr 的四列网格的一部分。我尝试按照here 的建议将父元素设置为显示为 inline-block，将子元素设置为 flex-grow，但这并不是我想要的。如何使网格列不灵活，而段落延伸到网格列的宽度？

Answer 1

我现在正在处理它。唯一适合我的选择是设置固定的父宽度