固定 div 和灵活 div 的 HTML CSS 样式

Question

我想实现以下布局，其中有两列，固定大小的一列(50 像素宽)用于我的图标，灵活的一列用于扩展消息的剩余部分。我正在使用 bootstrap 4 和 angular2

目前，我正在使用以下设置和 bootstrap 4 网格布局

<div class="col-1">
    <md-icon class="material-icons notification-row-icon">done</md-icon>
</div>

<div class="col-11">
    <div class="notification-row-text-div">
        <label class="notification-mrow-essage-label">{{message}}</label>
    </div>
</div>

但是当屏幕特别小时输出关闭，如下所示。我希望图标始终位于消息的左侧，而不是在屏幕变小时堆叠在一起。由于 col 方式似乎会造成此问题，因此我正在考虑从良好的旧 html/css 方式重新构建它。我怎样才能做到这一点？

Answer 1

你可以使用flexbox

.flexbox{
  display:flex;
}
.col-1,
.col-11{
  border:1px solid;
}
.col-1 {
    width: 50px;
}
.col-11 {
    flex: 1 1;
}

<div class=flexbox>
  <div class="col-1">
    <md-icon class="material-icons notification-row-icon">done</md-icon>
  </div>

  <div class="col-11">
    <div class="notification-row-text-div">
      <label class="notification-mrow-essage-label">{{message}}</label>
    </div>
  </div>
</div>