How to make a block element in a flex container block not the width of the entire block?

Question

css

<div class = "container1">
        <div class="content1">
            <div class ="travel">ПУТЕШЕСТВИЯ ПО РОССИИ</div><br>
         <div class="block"></div>
            <p>
                Самые интересные уголки России<br>
                Самые необычные маршруты<br>
            </p>
        </div>
        <div class="content2">
            <div class ="travel">ПУТЕШЕСТВИЯ ПО ЕВРОПЕ</div><br>
            <p>
                Разные страны, разные культуры, исторические<br>
                места и все самое интересное в современной<br>
                Европе
            </p>
        </div>
        <div class="content3">
             <div class ="travel">ПУТЕШЕСТВИЯ ПО АФРИКЕ</div><br>
            <p>
                Дикая природа, крокодилы, обезьяны, сафари<br>
                на джипах, гостиницы на деревьях и самые<br>
                опасные приключения ждут тебя
            </p>
        </div>
    </div>

.container1 {
    width:1200px;
    display: flex;
   }
.container1 div {
    width: 400px;
    color: darkblue;
    box-sizing: border-box;
}
img {
    margin: 15px;
}
.content1 {
     text-align: center;
     border: 4px solid darkblue;
}
.travel {
    font-size: 16px;
    padding-top: 5px;
}
.block {
    height: 5px;
    background: gold;
    flex-shrink: 50px;
}
.content1 p {
    color: darkblue;
    padding-top: 15px; 
    font-size: 14px;  
    }

Answer 1

First, not cross-browser. It is necessary to register display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display:flex; Also, cross-browser compatibility is needed for this property -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
If you need not full width on a regular PC, set flex-grow: 0; I use the shorter notation flex: 0 1 32%;. For an example, go to the page kstb26.ru/catalog/cement and see how I implemented this for a product card for a PC and tablet, as well as for a smartphone.