How to exclude the first child from flex calc, while giving it a position relative to the parent?-CodePudding

How can I position the first child under a flex parent, out of the flex calculations, and also set its position as needed?

.mycontainer{
      background-color: 
      rgb(200,200,200);
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
    .mycontainer-bar{
      width: 20px;
      height: 20px;
      background-color: red;
      position: absolute;
      /* The following sticks the bar/box to the top-right of the page, not of container */
      top: 0px;
      right: 0px;
    }
    .row{
      margin: 5px;
      background-color: blue;
      width: 80%;
      height: 90px;
    }

<div >
      <div >t</div>
      <div >r1</div>
      <div >r2</div>
    </div>

I'm trying to make the red box like a toolbar, sticking it to the top-left or top-right of its parent container.

One way around, I can make two children of the container, where the first child would be the toolbar and the second one would be a Flex parent of the required rows. But before I march on that, I really want to if it is possible to make it work out as I want without needing extra html content.

CodePudding user response：

If I understood correctly where you want to place it, one way to do it is with position:relative and adding margin-left.

.mycontainer{
  background-color: 
  rgb(200,200,200);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.mycontainer-bar{
  width: 20px;
  height: 20px;
  background-color: red;
  position: relative;
  margin-left: calc(100% - 20px)
}
.row{
  margin: 5px;
  background-color: blue;
  width: 80%;
  height: 90px;
}

<div >
  <div >t</div>
  <div >r1</div>
  <div >r2</div>
</div>

CodePudding user response：

(Will mark it as best answer when I'm able to.)

I've sorted it out by having

position: relative

on the container, and

position: absolute; 
top:0px; 
right:0px;

On the red box. It also helped not take any space for the box!