文字重叠边框底部div

Question

我有3个div：div 1包含图片，div 2包含边框，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;
    }