文字叠加边框底部div

Question

我有三个div：div 1包含图像，div 2包含border，div 3包含文本：

<div id="div-1">
    <div class="item1"></div>
    <div class="item2">
        <img src="dsc00895-1.jpg">
    </div>
    <div class="item3"></div>
</div>
<div id="div-2">
</div>
<div id="div-3">
    <div class="item1"></div>
    <div class="item2">
        <p>abcdefghiklmnopqrst abcdefghiklmnopqrst</p>
    </div>
    <div class="item3"></div>
</div>

和css：

#div-1 {
    display: flex;
    flex-wrap: wrap;
}
#div-1 > .item1, #div-1 > .item3{
    border-bottom: 3px solid red;
    width: 450px;
}
#div-1 > .item2 {
    flex-grow: 1;
}
#div-1 > .item2 > img {
    width: 250px;
    display: block;
    margin: auto;
    position: relative;
    top: 60px;
}
#div-2 {
    height: 200px;
    border-left: 3px solid red;
    border-right: 3px solid red;
}
#div-3 {
    display: flex;
    flex-wrap: wrap;
}

#div-3 > .item1, #div-3 > .item3{
    border-top: 3px solid red;
    width: 150px;
}

#div-3 > .item2 {
    flex-grow: 1;
}

#div-3 > .item2 > p {
    text-transform: uppercase;
    font-size: 36px;
    border: 1px solid red;
    text-align: center;
    margin-top: -20px;
}

我希望当我更改div 3的内容文本时，div 2的边框底部将缩短。我正在使用display : flex命令列包含文本，图像和其他列来显示边框。但是第1,3列要设置固定宽度，使第2列的宽度不自动。

如果内容文本的宽度是自动的，我如何编辑CSS？

Answer 1

在css中从＃div-3> .item2中删除flex-grow并添加flex-grow：1;到＃div-3> .item1，＃div-3> .item3，这将解决问题。

 #div-3 {
       display: flex;
       flex-wrap: wrap;
    }

    #div-3 > .item1, #div-3 > .item3{
       border-top: 3px solid red;
       width: 150px;
       flex-grow: 1;
    }

    #div-3 > .item2 {

    }

    #div-3 > .item2 > p {
       text-transform: uppercase;
       font-size: 36px;
       border: 1px solid red;
       text-align: center;
       margin-top: -20px;
    }