Expanding a div element only from below

Question

I was wondering if it is possible to expand a div, that is positioned to be in the center by using justify-content: center; and align-items: center; only from below when new Elements are added to it.

const items = document.getElementById('items');

const add = () => {
  const newItem = document.createElement('div');
  newItem.innerText = 'Item';
  items.append(newItem);
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#body{
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#container{
  background-color: whitesmoke;
  min-height: 200px;
  width: 200px;
}

<div id="body">
  <div id="container">
    <button onClick='add()'>Add item</button>  
    <div id="items"></div>
  </div>
</div>

As you can see, the elements make it expand from above and below. What I want it to do is only expand from below.

remove justify-content and align-items then apply margin:auto to the child element — Temani Afif, Nov 06 '21 at 13:35

score 2 · Answer 1 · answered Nov 06 '21 at 07:58

In this case as you know the width of the element and its minimum height I would forget flex and instead position the container relative to its parent which you can do for any viewport by using CSS calc function.

The top of the container will therefore remain at a fixed position within its parent however much its height increases.

const items = document.getElementById('items');

const add = () => {
  const newItem = document.createElement('div');
  newItem.innerText = 'Item';
  items.append(newItem);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#body {
  height: 100vh;
  width: 100vw;
  position: relative;
}

#container {
  background-color: whitesmoke;
  min-height: 200px;
  width: 200px;
  position: relative;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  display: inline-block;

}

<div id="body">
  <div id="container">
    <button onClick='add()'>Add item</button>
    <div id="items"></div>
  </div>
</div>

score 1 · Answer 2 · answered Nov 06 '21 at 07:29

This behaviour is not surprising and is also correct. In my opinion, you should work with a fixed vertical positioning of the box. For example like this:

const add = () => {
  const newItem = document.createElement('div');
  newItem.innerText = 'Item';
  items.append(newItem);
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#body{
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  margin-top: 10%;
}

#container{
  background-color: whitesmoke;
  min-height: 200px;
  width: 200px;
}

<div id="body">
  <div id="container">
    <button onClick='add()'>Add item</button>  
    <div id="items"></div>
  </div>
</div>

score 1 · Accepted Answer · answered Nov 06 '21 at 07:45

You can wrap it in a div and adjust their properties:

const items = document.getElementById('items')

const add = () => {
  const newItem = document.createElement('div')
  newItem.innerText = 'Item'
  items.append(newItem)
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#container {
  position: absolute;
  background-color: whitesmoke;
  min-height: 200px;
  width: 200px;
}

#outer {
  /* the same min-height as #container */
  min-height: 200px;
  position: relative;
  display: flex;
  justify-content: center;
}

<div id="body">
  <div id="outer">
    <div id="container">
      <button onClick="add()">Add item</button>
      <div id="items"></div>
    </div>
  </div>
</div>

Expanding a div element only from below

3 Answers3