HTML CSS styling for a fixed div and a flexible div - html

Question

I want to achieve the following layout where there are two columns, a fixed size one (50px wide) for my icon and a flexible one that stretches the remaining part for my messages. I am using bootstrap 4 with angular2
Currently, I am using the following setup with bootstrap 4 grid layout
<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>
But the output is off when the screen is extra small as shown below. I want the icon to be always on the left hand side of the message rather than stacked when the screen gets small. Since the col way seems to create this problem, I am thinking to re-build this from good old html/css way instead. How can I achieve that?

Answer 1

You can use 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>

Answer 2

Here's a flexbox solution.
The main property to know in this solution is flex-grow.
It specifies what amount of space inside the flex container the item should take up.
If all items in a flex container had the same value, they'd all be the same width. If only one item like we have in this example has flex-grow applied, it takes up the remaining space of it's container.
If you're unfamiliar with box-sizing and the value border-box, it includes padding and borders with an elements width assignment instead of them being added in addition to the assigned width. So if you tell and element to be 200px wide and have 10px of padding, it's 200px wide. Not 220px.
#import url( 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.container {
width: 90%;
margin: 0 auto;
}
.row {
display: flex;
align-items: flex-start;
margin-left: -5px;
margin-right: -5px;
}
.col {
padding: 5px;
}
.col.fixed {
width: 50px;
}
.col.fill {
flex-grow: 1;
}
p {
margin: 0 0 1rem;
}
<div class="container">
<div class="row">
<div class="col fixed">
<i class="fa fa-rocket"></i>
</div>
<div class="col fill">
<p>
Bring a spring upon her cable handsomely gibbet Corsair scuttle prow Buccaneer nipper. Gun jack clap of thunder port holystone killick bilge water chandler. Gunwalls Cat o'nine tails lookout careen Jack Tar salmagundi boom mutiny.
</p>
</div>
</div>
</div>

Answer 3

You could achieve this without multiple columns...
.icon {
width: 3em; /* change as you need */
display: inline-block;
}
.notification-row-text-div {
display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-12">
<span class="icon">▣</span>
<div class="notification-row-text-div">
<label class="notification-mrow-essage-label">John Doe</label>
</div>
</div>
</div>
</div>

Answer 4

Flexbox is built into Bootstrap 4 so you don't need any extra CSS other than the fixed width column.
.fixed {
width: 50px;
}
Then just use the auto-layout col class to consume the remaining space:
<div class="row">
<div class="fixed">
icon
</div>
<div class="col">
..
</div>
</div>
The col class already uses flex-grow.
Demo: http://www.codeply.com/go/iprwiDJhgy

Answer 5

You can try this simple code. It is fully tested. I hope it will help you.
HTML:
<div class="container">
<div class="row">
<div class="col fixed">
<span>©</span>
</div>
<div class="col fill">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
CSS:
<style>
.col.fixed {
width:50px;
float:left;
}
.col.fill {
display: block;
margin-left: 50px;
}
</style>