The outer DIV will envelop and grow taller in conjunction with the inner DIV

Could use a little help here. Thank you :)

I'm having trouble figuring out how to get the outer div to wrap around the inner div and expand upwards with the content inside the inner editable div.

The inner div should expand from bottom to top, and the outer div should envelop it (with green color wrapping around the red) and also expand along with it.

Note: To make the red div expand upwards, press SHIFT+ENTER.

I've provided an example in the codepen below:

<div style="background-color:green;">
  Test Test
  <div id="example" contenteditable style="background-color:red; position: absolute; bottom: 0px">
    Test Test
  </div>
</div>

javascripthtmlcss

Answer №1

To implement a responsive layout, you can utilize flexbox:

.main-container {
  background: green;
  display: flex;
  flex-direction: column;
  /* Set minimum height */
  min-height: 50vh;
}

.sub-container {
  background: red;
  margin-top: auto;
}
<div class="main-container">
  Content Here
  <div id="example" class="sub-container" contenteditable>
    Subcontent Here
  </div>
</div>

Answer №2

Both elements need to have fixed positions and the wrapper's height should be set to 100%.

<div style="background-color:green;  height: 100%; position: absolute;">
wrapper                                 
  <div id="example" style="border: 1px solid red; position: absolute; bottom: 0;">
    inner
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent form from being resubmitted upon browser refresh

Currently, I have a form where users input data and it searches the database to display results. The issue arises when the user refreshes the page as it triggers an alert about resubmission. Although the data remains the same upon resubmitting, is there a ...

phpjqueryhtmlmysqlajax

What is the process of connecting a Yarn module to a Docker container in another repository?

I'm currently facing a challenge in linking a module to a Docker container from another repository. To provide some background, I have a container hosting a React application named launch-control-admin. This project relies on a yarn module called @com ...

javascriptreactjsdockernpmyarnpkg

Troubleshooting problems with CSS borders and margins in the anchor element

Having a peculiar box-model issue here. My header is filled with links, but despite setting 0px margins, the links are displaying with 2px margins around each one. To demonstrate the problem, I've created a test page located at . Ideally, each link i ...

htmlcss

Is jQuery capable of appropriately escaping my quotes?

Currently, I am utilizing $.cookie() to retrieve all the values from a cookie which are stored in JSON format: var properties = $.cookie('params'); The output of properties is: {"distinct_id": "13f97d6600b42e-000e6293c-6b1b2e75-232800-13f97d66 ...

javascriptjqueryjsonpost

Informing the parent window of the child window's activities in order to adjust the timer for the user timeout feature

Within my Jquery function, I have implemented a feature that darkens the screen after a period of user inactivity. This triggers a pop-up window giving the user the option to stay logged in by clicking a button. If there is no response within the set time ...

javascriptasp.netjqueryiframeparent-child

Problem Installing Express Sharp using Docker

When deploying via Docker, I encountered an error with sharp, even though it works fine on my workspace. I followed all the steps but still faced issues. Error: 'linux-x64' binaries cannot be used on the 'linuxmusl-x64' platform. P ...

javascriptnode.jsdockerexpresssharp

What is the functionality of a nested child directive root element when placed at the same level as the parent directive root element?

Hello there, I'm currently facing a unique situation that has me stumped. Is it possible to replace the content of a directive's root element with that of a nested (child) directive? Here is an example scenario: <div id=”main”> <n ...

javascriptangularjsangularjs-directive

What is causing the question mark symbol to appear at the beginning of my ajax response?

Below is my JavaScript code: $('#tags').select2({ tags: true, tokenSeparators: [','], createSearchChoice: function (term) { return { id: $.trim(term), text: $.trim(term) + ' (new tag)&ap ...

javascriptphpajaxjsoncodeigniter

What is the reason behind the failure to update the state via a reducer and Object.assign?

I'm attempting to develop a reducer without utilizing ES6. It's an outmoded PHP application that lacks a build process for transpilation. I am initializing the state: let defaultState = { accountTypes: { individual: { c ...

javascriptreduxstateredux-actions

Tips for effectively utilizing Mongoose models within Next.js

Currently, I am in the process of developing a Next.js application using TypeScript and MongoDB/Mongoose. Lately, I encountered an issue related to Mongoose models where they were attempting to overwrite the Model every time it was utilized. Here is the c ...

javascriptnode.jstypescriptmongoosenext.js

Conceal a component when the succeeding one appears on a separate line

I'm looking for a solution to display an address on a webpage in two different formats based on the length. The first format should be: Street Number, PostalCode City If the address is too long to fit on one line, it should be displayed as: Street ...

csscss-float

Identify alterations in an input field after selecting a value from a dropdown menu

Is there a way to detect changes in the input field when selecting a value from a drop-down menu, similar to the setup shown in the image below? html: <input type="text" class="AgeChangeInput" id="range"/> js:(not working) <script> $(docume ...

javascriptjquery

How to retrieve video duration in Angular 2 before uploading the file

Is there a way to retrieve the video duration before uploading it in Angular2? I am looking for a solution without using jQuery. Here is the code snippet I have so far: <input type="file" class="form-control" ng2FileSelect [uploader]="uploader" accept= ...

htmlangularfile-upload

Error: Jest react testing encountered an issue when attempting to read the property 'type' from an undefined value

While conducting tests on my app components created with the material UI library using jest and enzyme, I encountered an error in one of my packages. Here is a screenshot of the error: Click here to view ...

javascriptjestjsmaterial-uienzyme

Looking to retrieve the value of a selected checkbox within a horizontally laid out HTML table

Trying to extract values from a table with a horizontal header when checkboxes are selected. The goal is to retrieve the values of the selected column for all rows. Code snippet provided below. <script src="https://ajax.googleapis.com/ajax/libs/jquer ...

javascriptjqueryhtml

Automatically redirect to a different page upon clicking the jquery popup button

I integrated a jQuery popup feature on my website to display messages. Now, I am looking to implement a redirect to another page when the user clicks a button within the jQuery popup. However, I am unsure of how to achieve this. <script type="text/ja ...

javascriptjquery

Transform an { Key : Value } Object into Regular Variables using jQuery

Here is a code snippet in PHP: foreach($myarray as $key=>$value) { ${$key} = $value; } Now, I am wondering if we can achieve the same functionality using JS/jQuery? In this jQuery example, I am trying to assign the value of each td element with a cla ...

phpjavascriptjqueryarraysobject

Is there a streamlined approach to signal a successful callback to $q.all without the need to define a $q.defer() variable?

Within my application, I have a mixture of synchronous and asynchronous methods. Here is an example of code from one of the controllers: $q.all([ asyncMethod1(), syncMethod1() ]) .then(function (results) { Even though I don't actually need t ...

javascriptangularjsangular-promise

Utilizing AngularJS: Dynamically employ custom directives for enhanced reusability

I am currently developing my debut single page Angular.js application and finding myself in a bit of a rut when it comes to programmatically compiling/evaluating a custom directive to insert it into the DOM from within a controller. The custom directive I ...

javascriptangularjsangular-directive

Node.js: The object in req is not functioning as expected

// Function to merge objects with unsent columns kept from old objects. function merge_options(obj1, obj2) { const obj3 = {}; for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; } for (var attrname in obj2) { obj3[attrname] = obj2[attrname] ...

javascriptnode.js