Item with position fixed act as position absolute - css

Question

.second{
width: 150px;
height: 150px;
border: 2px solid red;
}
.first{
position:fixed ;
top: 0;
}
<div class="container">
<div class="first">
<li>fff</li>
<li>fff</li>
<li>ff</li>
<li>fff</li></div>
<div class="second"></div>
</div>
How to avoid the positioning of "second" over "first" container? I want to position both containers side by sie (first->left;second->right). With position fixed i want to apply the sticky property.

Answer 1

You can use CSS flex-box to build what you want ;)
.container {
display: flex;
}
.first {
width: 150px;
height: 150px;
border: 2px solid blue;
}
.second {
width: 150px;
height: 150px;
border: 2px solid red;
}
<div class="container">
<div class="first">
<ul>
<li>fff</li>
<li>fff</li>
<li>ff</li>
<li>fff</li>
</ul>
</div>
<div class="second"></div>
</div>

Answer 2

Make use of
display: inline-block;

Answer 3

I don't know what you want to do with position: fixed but you can achieve your goal of side by side div using the following code.
.second{
width: 150px;
height: 150px;
border: 2px solid red;
float:left
}
.first{
width:150px;
height:150px;
border: 2px solid blue;
top: 0;
float:left
}
<div class="container">
<div class="first">
<li>fff</li>
<li>fff</li>
<li>ff</li>
<li>fff</li></div>
<div class="second"></div>
</div>

Answer 4

Building on the answer from masoudmanson if you want the red box to align right, you can do the following;
.container {
display: flex;
flex-wrap:no-wrap;
}
.first {
flex-grow:1;
border: 2px solid blue;
}
.second {
width: 150px;
height: 150px;
border: 2px solid red;
}
<div class="container">
<div class="first">
<ul>
<li>fff</li>
<li>fff</li>
<li>ff</li>
<li>fff</li>
</ul>
</div>
<div class="second"></div>
</div>