How to position items along the whole screen height while avoiding absolute positioning?

Question

I have a div container with two subcontainers. The parent div should have a full height (from the top to the bottom of the screen). The first sub container should always be in the left center of that parent container. The second sub container should always be at the right bottom of that parent container.

First of all I tried to solve it using absolute positions

html,
body {
  height: 100%;
}

#first {
  position: absolute;
  top: 50%;
}

#second {
  position: absolute;
  bottom: 0;
  right: 0;
}

<div>
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    this is always on the right bottom of the screen
  </div>
</div>

I thought about avoiding absolute positions. Is there a way using flexbox/grid for this? I started with this

html,
body {
  height: 100%;
}

#parent {
  height: 100%;
  display: flex;
}

#first {
  align-self: center;
}

#second {
  align-self: flex-end;
  display: flex;
  justify-content: flex-end;
}

<div id="parent">
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    <div>this is always on the right bottom of the screen</div>
  </div>
</div>

as you can see the first subcontainer seems to be fine. The second one is at the bottom of the container which looks good. But the content is not at the right bottom corner (you might have to click "Full page" to see it). Does someone know how to fix it? Maybe this snippet can be simplified?

Answer 1

The second div doesnt need to set display flex. Just set margin-left: auto; it should work as div is display block by default.

html,
body {
  height: 100%;
}

#parent {
  height: 100%;
  display: flex;
}

#first {
  align-self: center;
}

#second {
  align-self: flex-end;
  margin-left:auto;
  white-space: nowrap;
}

<div id="parent">
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    <div>this is always on the right bottom of the screen</div>
  </div>
</div>

Answer 2

If I understand your problem correctly, then you need to set these rules to the html, body tags:

html, body {
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

And the parent container has a height: 100%. I have given two solutions with absolute positioning and flexbox.

html, body {
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#first {
  position: absolute;
  top: 50%;
}

#second {
  position: absolute;
  bottom: 0;
  right: 0;
}

<div id="container">
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    this is always on the right bottom of the screen
  </div>
</div>

Solution with flex and margin:

html,
body {
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#container {
  display: flex;
  height: 100%;
}

#first {
  margin-top: auto;
  margin-bottom: auto;
}

#second {
  margin-top: auto;
  margin-left: auto;
}

<div id="container">
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    this is always on the right bottom of the screen
  </div>
</div>