Adding content into inline-flex div pushes it down [duplicate]-CodePudding

I am trying to order some divs, the idea is that I want to be able to offset them relative to each other to create asymmetrical grid.

All of it is working, until the moment content is added inside.

When a content is added into a div, that div is moved and positioned relative to the content inside it, so that the content is at the top left of the div, I am expecting the opposite behaviour, the div should not move, and the content should move relative to the div.

NOTE: I can not use an outside container to wrap all of them in it.

.column{
  width: 49%;
  height: 200px;  
  
  position: relative;
  display: inline-flex;
   
}
.column:nth-child(2n){
  top: 30px;
  right: 20px; 
}

.column:nth-child(2n - 1){
  bottom: 30px;
  left: 20px; 
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

<div class="column red">
 <p>
   This breaks it
 </p>
</div>

<div class="column green">
</div>
<div class="column blue">
</div>

<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>

<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">

CodePudding user response：

If possible you could achieve the expected behavior by wraping the content inside another div and positioning it using position: absolute

.column{
  width: 49%;
  height: 200px;  
  
  position: relative;
  display: inline-flex;
   
}
.column:nth-child(2n){
  top: 30px;
  right: 20px; 
}

.column:nth-child(2n - 1){
  bottom: 30px;
  left: 20px; 
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.column > div {
   position: absolute
}

<div class="column red">
  <div>
   <p>
     This breaks it
   </p>
  </div>
</div>

<div class="column green">
</div>
<div class="column blue">
</div>

<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>

<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">

CodePudding user response：

Why don't you use the old pal float. I still use it over flex and grid often. much easier when simple layouts-

* {box-sizing:border-box;}
.column{
  width: 50%;
  height: 200px;  
  float:left;
  position:relative; 
}
.column:nth-child(2n){
  top: 30px;
  right: 20px; 
}

.column:nth-child(2n - 1){
  bottom: 30px;
  left: 20px; 
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

<div class="column red">
 <p>
   This breaks it
 </p>
</div>

<div class="column green">
</div>
<div class="column blue">
</div>

<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>

<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">

Note: I add box-sizing rule becouse I hate that width:49%