Unable to align Flexbox item to flex-end position

Question

Unable to align Flexbox item to flex-end position

Can someone help me troubleshoot this codepen with the .inner-wrp div (dark red) fitting under the lightblue .top-right div?

Check it out here!

.purple {
  background: purple;
}

.green {
  background: green;
}

.lightblue {
  background: lightblue;
}

.darkred {
  background: darkred;
}

.lightbrown {
  background: lightbrown;
}

.orange {
  background: orange;
}

.outer-wrp {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.outer-wrp .left-side {
  height: 100%;
  width: 500px;
  display: inline-block;
}
.outer-wrp .top-right {
  width: calc(100vw - 500px);
  vertical-align: top;
  display: inline-block;
  height: 90px;
}
.outer-wrp .inner-wrp {
  width: calc(100% - 500px);
  display: block;
  height: calc(100% - 90px);
  float: right;
}
.outer-wrp .inner-wrp .inner-left {
  display: inline-block;
  width: calc(100% - 200px);
  height: 100%;
}

<div class="outer-wrp purple">
  <div class="left-side green"></div>
  <div class="top-right lightblue"></div>
  <div class="inner-wrp darkred">
    <div class="inner-left brown"></div>
    <div class="inner-right orange"></div>
    </div>
  </div>
</div>

https://i.sstatic.net/rujRr.png

I'm using align-self: flex-end on the .inner-wrp, but it's still getting overlapped by the green .left-side div.

Any ideas on how to get it positioned correctly under the light blue div on the right side?

html css flexbox

Answer 1

Answer №1

Your approach includes a variety of properties (flex, inline-block, float, vertical-align, etc) that are unnecessary since you can achieve the desired layout using flexbox properties alone. Additionally, it is advised to avoid using the 'vw' unit as it includes the scrollbar width and may cause unexpected behavior when scrolling (consider using 100% instead). To achieve the desired result, switch from a row direction to a column direction:

.purple {
  background: purple;
}

.green {
  background: green;
}

.lightblue {
  background: lightblue;
}

.darkred {
  background: darkred;
}

.lightbrown {
  background: lightbrown;
}

.orange {
  background: orange;
}

.outer-wrp {
  height: 100vh;
  display: flex;
  flex-direction:column;
  flex-wrap: wrap;
}

.outer-wrp .left-side {
  height: 100%;
  width: 500px;
}

.outer-wrp .top-right {
  width: calc(100% - 500px);
  height: 90px;
}

.outer-wrp .inner-wrp {
  width: calc(100% - 500px);
  height: calc(100% - 90px);
  display:flex;
}

.outer-wrp .inner-wrp .inner-right {
  width: 200px;
}
.outer-wrp .inner-wrp .inner-left {
  width: calc(100% - 200px);
}

body {
 margin:0;
}

<div class="outer-wrp purple">
  <div class="left-side green"></div>
  <div class="top-right lightblue"></div>
  <div class="inner-wrp darkred">
    <div class="inner-left brown"></div>
    <div class="inner-right orange"></div>
  </div>
</div>

Answer 2

Your approach includes a variety of properties (flex, inline-block, float, vertical-align, etc) that are unnecessary since you can achieve the desired layout using flexbox properties alone. Additionally, it is advised to avoid using the 'vw' unit as it includes the scrollbar width and may cause unexpected behavior when scrolling (consider using 100% instead). To achieve the desired result, switch from a row direction to a column direction:

.purple {
  background: purple;
}

.green {
  background: green;
}

.lightblue {
  background: lightblue;
}

.darkred {
  background: darkred;
}

.lightbrown {
  background: lightbrown;
}

.orange {
  background: orange;
}

.outer-wrp {
  height: 100vh;
  display: flex;
  flex-direction:column;
  flex-wrap: wrap;
}

.outer-wrp .left-side {
  height: 100%;
  width: 500px;
}

.outer-wrp .top-right {
  width: calc(100% - 500px);
  height: 90px;
}

.outer-wrp .inner-wrp {
  width: calc(100% - 500px);
  height: calc(100% - 90px);
  display:flex;
}

.outer-wrp .inner-wrp .inner-right {
  width: 200px;
}
.outer-wrp .inner-wrp .inner-left {
  width: calc(100% - 200px);
}

body {
 margin:0;
}

<div class="outer-wrp purple">
  <div class="left-side green"></div>
  <div class="top-right lightblue"></div>
  <div class="inner-wrp darkred">
    <div class="inner-left brown"></div>
    <div class="inner-right orange"></div>
  </div>
</div>

Answer 3

Answer №2

After reviewing your desired layout, it appears that you will need to create a container <div> for the red and blue containers with specific styling:

display: flex;
flex-wrap: wrap;
align-items: flex-start;
height: 100%;
width: 50%;

You can view the implementation here.

The code snippet is shown below:

.purple {
  background: purple;
}

.green {
  background: green;
}

.lightblue {
  background: lightblue;
}

.darkred {
  background: darkred;
}

.brown {
  background: brown;
}

.orange {
  background: orange;
}

.outer-wrp {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.outer-wrp .left-side {
  height: 100%;
  width: 500px;
  display: inline-block;
}

.outer-wrp .top-right {
  width: calc(100vw - 500px);
  vertical-align: top;
  display: inline-block;
  height: 90px;
}

.outer-wrp .inner-wrp {
  width: calc(100% - 500px);
  display: block;
  height: calc(100% - 90px);
  float: right;
}

.outer-wrp .inner-wrp .inner-left {
  display: inline-block;
  width: calc(100% - 200px);
  height: 100%;
}


.blue-red {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 100%;
  width: 50%;
}

<div class="outer-wrp purple">
  <div class="left-side green"></div>
  <div class="top-right lightblue"></div>
  <div class="inner-wrp darkred">
    <div class="inner-left brown"></div>
    <div class="inner-right orange"></div>
  </div>
</div>

If necessary, consider adjusting .outer-wrp .inner-wrp to calc(100vw - 500px), or further customization as needed.

Answer 4

After reviewing your desired layout, it appears that you will need to create a container <div> for the red and blue containers with specific styling:

display: flex;
flex-wrap: wrap;
align-items: flex-start;
height: 100%;
width: 50%;

You can view the implementation here.

The code snippet is shown below:

.purple {
  background: purple;
}

.green {
  background: green;
}

.lightblue {
  background: lightblue;
}

.darkred {
  background: darkred;
}

.brown {
  background: brown;
}

.orange {
  background: orange;
}

.outer-wrp {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.outer-wrp .left-side {
  height: 100%;
  width: 500px;
  display: inline-block;
}

.outer-wrp .top-right {
  width: calc(100vw - 500px);
  vertical-align: top;
  display: inline-block;
  height: 90px;
}

.outer-wrp .inner-wrp {
  width: calc(100% - 500px);
  display: block;
  height: calc(100% - 90px);
  float: right;
}

.outer-wrp .inner-wrp .inner-left {
  display: inline-block;
  width: calc(100% - 200px);
  height: 100%;
}


.blue-red {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 100%;
  width: 50%;
}

<div class="outer-wrp purple">
  <div class="left-side green"></div>
  <div class="top-right lightblue"></div>
  <div class="inner-wrp darkred">
    <div class="inner-left brown"></div>
    <div class="inner-right orange"></div>
  </div>
</div>

If necessary, consider adjusting .outer-wrp .inner-wrp to calc(100vw - 500px), or further customization as needed.

Unable to align Flexbox item to flex-end position

Answer №1

Answer №2

Similar questions

What is the easiest way to modify the color of a basic PNG image in a web browser?

Expanding the width of CSS dropdown menus according to their content

How can I achieve a stylish alternating bottom-border effect for my website navigation menu?

Updating a table in Javascript after deleting a specific row

I want to display a div above an image when hovering over it

Issue with Bootstrap margins and padding

Tips for displaying the html content saved in the database onto an ejs webpage

Share your hefty files through an online portal

Retrieve Object Key in Angular 7

Text alignment issues cause animation to vanish

Positioning a secondary div beside a primary div that is centered on the page

Issues with implementing Bootstrap icons in Angular are hindering functionality

What are some different CSS options for setting the indentation of the first line of

Issues with border/padding and overlay in Packery Grid Layout

Show data from a Mysql table column in a dropdown menu

"Creating a new element caused the inline-block display to malfunction

Simple CSS and HTML trick for creating a seamless hide and hover effect

What could be the reason that my d3.tooltip is not functioning properly for these specific two lines on the chart?

What is the best way to assign two styles with the same value in a single line of code?

capturing the selected value from a dropdown menu upon form submission