Place a div at the bottom of a flexbox while adding some padding around it

Question

Place a div at the bottom of a flexbox while adding some padding around it

Here's what I'm dealing with:

.flex-container {
  display: flex;
  justify-content: center;
  padding: 5%;
  position: relative;
}

.box1 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}

<div class="flex-container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

I'm trying to figure out how to keep box2 centered while positioning box1 at the bottom of the flex container. The issue is that when I use 'bottom' on box1, it only goes to the end of the padding due to the flex container having padding. Additionally, when I absolutely position box1, it causes box2 to stretch and fill the entire flex container since box1 is no longer part of the document flow.

html css flexbox

Answer 1

Answer №1

It appears that your goal is not entirely clear, but based on my understanding, the following code could potentially provide a solution.

.flex-container {
  display: flex;
  justify-content: center;
  padding: 5%;
  position: relative;
  border: 3px solid black;
}

div {
  text-align: center; // not necessary
}

.box1 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20%;
  border: 1px solid green;
}

.box2 {
  border: 1px solid red;
  height: 20px;
  width: auto;
  padding: 5px;
}

<div class="flex-container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>

EDIT: To truly center the element, consider adding the padding from either box or box2 to the container as an artificial height, or utilize the calc() method.

Answer 2

It appears that your goal is not entirely clear, but based on my understanding, the following code could potentially provide a solution.

.flex-container {
  display: flex;
  justify-content: center;
  padding: 5%;
  position: relative;
  border: 3px solid black;
}

div {
  text-align: center; // not necessary
}

.box1 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20%;
  border: 1px solid green;
}

.box2 {
  border: 1px solid red;
  height: 20px;
  width: auto;
  padding: 5px;
}

<div class="flex-container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>

EDIT: To truly center the element, consider adding the padding from either box or box2 to the container as an artificial height, or utilize the calc() method.

Place a div at the bottom of a flexbox while adding some padding around it

Answer №1

Similar questions

Having a newline between HTML elements can disrupt the structure of an HTML layout

After uploading my website, I noticed that one of the tabs appears in Chinese

The attempt to remove the ajax-loaded page while preserving the original div is proving to be

Explicitly employ undefined constants deliberately

To avoid truncation issues, consider inserting a plus sign following the ellipsis in the text-overflow property

What causes the unexpected outcome when applying theme overrides in Mui V5?

Sending HTML output to a PHP script

Introducing a pause in the function while rendering objects

A pair of variables combined within a set of single quotation marks

Achieve a responsive layout by dynamically sizing child div elements to fill their parent container using percentage-based margins and

Is there a way to display a div element just once in AngularJS?

I am encountering an issue where my codeigniter controller is unable to load my model

Tips for creating a fixed footer that adjusts with a flexible wrapper

Error: The database connection is currently down

What is the method for sending a down arrow key in Capybara?

Notification window when the page is being loaded

Facing issues with Handsontable opening within a jQuery UI dialog?

Adjust the number of images in each row based on the width of the screen

The art of analyzing HTML using either jquery or php

Preventing default events on a jQuery slider: enhance user experience