Пожалуйста, проверьте приведенный ниже рабочий пример на основе вашего кода, установите ширину столбцов как flex: 0 0 5%;
вместо width: 5%
.
@media screen and (min-width: 800px) {
.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
border-bottom: 1px solid black;
width: 100%;
}
.column {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.h-30vh {
height: 30vh;
}
.w-5per {
-ms-flex: 0 0 5%;
flex: 0 0 5%;
max-width: 5%;
justify-content: center;
align-content: center;
}
.bg-pink {
background-color: pink;
}
.bg-purple {
background-color: purple;
}
.bg-red {
background-color: red;
}
.bg-salmon {
background-color: salmon;
}
.column span {
font-size: 18pt;
display: flex;
}
.d-flex {
display: flex;
}
.pt-1em {
padding-top: 1em;
}
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="row h-30vh">
<div class="column bg-pink w-5per">
<span class="fa fa-user"> </span>
</div>
<div class="column bg-red">
<div> </div>
</div>
</div>
<!-- User info/Settings row -->
<div class="row h-30vh">
<div class="column bg-purple w-5per">
<span class="fa fa-cog"> </span>
</div>
<div class="column bg-red d-flex"> </div>
<div class="column bg-red d-flex"> </div>
</div>
<!-- Messages/Chat row -->
<div class="row h-25vh bg-salmon">
<div class="column w-5per">
<span class="fa fa-comment"> </span>
</div>
<div class="column bg-red pt-1em">
<div> </div>
<div> </div>
</div>
</div>