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

Is there a way to send multiple actions to Node.js via a dropdown list using POST method?

I have encountered an issue where I am trying to include multiple actions in a single form within a dropdown list. However, I am only able to POST one action at a time. admin.html <form action="/start" method="post" id="tableForm"> <select id= ...

htmlnode.jsexpress

"Utilize Ajax to load PHP content and dynamically refresh a specific div

I have implemented an image uploading system, but now I want to incorporate a feature that allows users to rotate the uploaded images using Ajax. The challenge I'm facing is that if the session variable is lost during a full page update, I need to ens ...

javascriptphpjqueryhtmlajax

Recursive instruction malfunctioning

I'm currently trying to develop a custom recursion directive, but unfortunately it's not functioning as expected. I have followed the instructions outlined here: Recursion in Angular directives For reference, you can view the fiddle here: http ...

javascripthtmlangularjsrecursionangularjs-directive

Identifying an Android device using Javascript or jQuery

Is there a way to identify an Android device for styling a mobile website? I want to add specific CSS styles for users on the Android platform. Appreciate any help! ...

javascriptjqueryandroid

Where can I locate htmlWebpackPlugin.options.title in a Vue CLI 3 project or how can I configure it?

After creating my webpage using vue cli 3, I decided to add a title. Upon examining the public/index.html file, I discovered the code snippet <title><%= htmlWebpackPlugin.options.title %></title>. Can you guide me on how to change and cu ...

javascripthtmlnode.jstypescriptvue.js

Differences between the http module and Express framework

After noticing this common pattern, I've become intrigued : const server = http.createServer(app); // Listen on provided port, on all network interfaces. server.listen(port); server.on('error', onError); server.on('listening', on ...

javascriptnode.jsexpress

Is it possible to incorporate jQuery into an AngularJS project?

When it comes to testing, AngularJS is a framework that supports test-driven development. However, jQuery does not follow this approach. Is it acceptable to use jQuery within Angular directives or anywhere in AngularJS for manipulating the DOM? This dilemm ...

javascriptangularjs

What is the best way to move to a new line without creating a space between the current line and the new line?

I am trying to achieve the desired output: $text = Hello, this is example text. rather than: $text = Hello, this is example text. When I use \n, it starts a new line. How can I make it stay on the same line below with the same startin ...

phphtml

Enhance Select Dropdown in AngularJS with Grouping and Default Selection

I am facing an issue with a form that includes a SELECT element. I have successfully loaded the possible values in my controller from a function that retrieves data from a database and groups the options by a group name. Although the list of options is lo ...

javascriptangularjsdrop-down-menu

Once the print dialog is canceled or saved, the current window remains open

Whenever I try to print the data, a new window opens displaying all the respective data of the HTML page. The print dialog then quickly appears, but if I cancel or close the dialog, the current window does not close. Can someone please provide suggestions ...

javascriptjqueryajaxlaravel-5.4

Tips for transferring properties from one React component to another React component

I need to figure out how to activate a button in a modal when text is entered into an input field. The form is part of a different class and is utilized within a parent class. How can I pass an onChange method to my form component? Check out the code for ...

javascriptreactjsmaterial-uireact-final-form

Toggle visibility of anchor tags on screens with lower resolution

Looking for help with my code <div id="contact-buttons-bar" class="slide-on-scroll" data-top="250px" style="left: 0px;"> <button class="contact-button-link show-hide-contact-bar" style="left: 0px;"> <a class="contact-button-link cb-ancor f ...

jqueryhtml

Utilizing the 'as' prop for polymorphism in styled-components with TypeScript

Attempting to create a Typography react component. Using the variant input prop as an index in the VariantsMap object to retrieve the corresponding HTML tag name. Utilizing the styled-components 'as' polymorphic prop to display it as the select ...

javascriptreactjstypescriptstyled-components

Expanding and collapsing UI elements within an ngRepeat loop in AngularJS

I have been attempting to incorporate collapsible panels within an ngRepeat loop. Below is the code I have been using: <div class="panel panel-default" ng-repeat="element in elements"> <div class="panel-heading"> ...

javascriptangularjstwitter-bootstrap

Using `useState` within a `while` loop can result in

I'm working on creating a Blackjack game using React. In the game, a bot starts with 2 cards. When the user stands and the bot's card value is less than 17, it should draw an additional card. However, this leads to an infinite loop in my code: ...

javascriptreactjstypescriptloops

Executing a get request in Backbone without using the Option parameter by implementing the beforeSend method

After gathering insights from the responses to this and this queries, I have formulated the code below for a GET request: var setHeader = function (xhr) { xhr.setRequestHeader("Authorization", "Basic " + btoa($rootScope.login.Gebruikersnaam + ":" + $r ...

javascriptangularjsrestbackbone.jsget

Tips for customizing the appearance of an HTML dropdown menu

Here is the code snippet: <select name="xyz" id="abc"> <option value="x">10/Page</option> <option value="y">20/Page</option> <option value="z">30/Pa ...

htmlcss

Fixing the hydration error in Next 13 can be challenging, especially when it occurs outside of a Suspense boundary

Encountering an issue while working with Next.js 13: Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching <div> in <html>. Every time I attempt to r ...

javascripthtmlreactjsnext.js

An error was thrown at line 474 in module.js

After recently installing nodejs on my laptop, I'm struggling to run a js file in the node environment. I attempted using this command: node C:\Program Files\nodejs\file.js, but encountered the following error: module.js:474 thr ...

javascriptnode.js

The input field malfunctioned after the clear button was pressed

Hi there, I have a question. Every time I try to click on the clear button, it keeps giving me an error message and I'm not sure what the issue is. Also, I can't type in the field anymore after clicking it. methods: { add () { this.ta ...

javascriptvue.js