Setting a maximum height using flex property of 1 while also enabling overflow

Imagine a scenario where you have a <div with a height specified as a percentage of its parent's height, and this <div contains a contenteditable element as its child. The goal is to make the child fill all available vertical space and scroll when it reaches the limit of its container.

Check out this code pen

The current issue is that while setting a fixed pixel height allows the overflow to work correctly (with scrolling appearing), using a percentage height causes the contenteditable element to extend beyond its boundaries.

https://i.sstatic.net/2j5EA.png

Regarding a possible solution, adding display: flex to the container seems to resolve the problem. It appears that utilizing flexbox throughout the structure is necessary for proper functionality. You can read more about this concept here.

Additionally, the presence of containerB may appear unnecessary at first glance. However, it serves the purpose of simulating a deeply nested contenteditable element.

cssflexboxoverflow

Answer №1

You're definitely heading in the right direction, but I believe you might be overcomplicating things.

Try removing the .containerB element and instead adjust the flex property of the .container element to have a column direction.

.container {
  border: 1px solid black;
  max-height: 60%;
  width: 500px;
  padding: 4px;
  overflow: none;
  display: flex;
  flex-direction: column;
}

.fill {
  border: 1px solid lightblue;
  flex: 1 1 auto;
  overflow: auto;
  min-height: 50px;
}

.outer {
  height: 400px;
  border: 1px dashed red;
}
<div class='outer'>
  <div class='container'>
    <div>hello</div>
    <div class='fill' contentEditable>edit</div>
  </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

Utilizing a background image in the slick slider

<div id="largeCarousel" style="display:inline-block; float:right;"> <div class="homepage-item" style="padding-bottom:52%; position:relative; box-sizing:border-box;"> <div id="largeCarouselContent" style="position:absolute ...

htmlcssslick.js

What could be causing the issue of my p tag not being centered within both of my content divs?

I'm struggling to center the paragraphs within the divs with classes .content1 and .content2. Can anyone help me figure out why? Check out the demo here Here is the code: .content1 p, .content2 p { text-align: center; background-color: rgba ...

css

One way to view inherited width while ensuring that data remains inside a pre tag is by utilizing CSS

Currently, I'm facing an issue with displaying PHP and Javascript code within pre tags in a project. The problem arises as the code spills outside the boundary of the containing element. While inspecting the console, I am attempting to identify the so ...

htmlcss

I am looking for a way to add some color to the text within a div on my HTML page. Can you help me

Is there a way to apply background color only to the text content within this div, without styling the entire element? ...

javascripthtmlcss

Ensuring the text is positioned centrally and at the bottom of a table cell

Is there a way to center and align text at the bottom of a cell in table? This is my desired layout: ...

htmlcsscss-tables

What is the best way to adjust the size of the close button in react-bootstrap for a unique design?

<CancelButton className="exitBtn"/> .exitBtn{ height:40px; width:35px; } I'm trying to adjust the dimensions of the cancel button, but for some reason it's not working. Can someone provide guidance on how to successfully ...

cssreactjsreact-bootstrap

The iFrame is set to a standard width of 300 pixels, with no specific styling to dictate the size

My current challenge involves utilizing the iframe-resizer package to adjust the size of an iframe dynamically based on its content. However, even before attempting any dynamic resizing, I encounter a fundamental issue with the basic iframe: it stubbornly ...

javascripthtmlcssiframe

The functionality of jQuery plugins does not seem to extend to content loaded via Ajax

Hello everyone, I have encountered a frustrating issue. I am currently utilizing bootstrap 2.3 along with some jQuery plugins for form styling and other purposes. However, I've noticed that when I load ajax content, particularly select elements, the ...

jquerycssajax

Styling Labels with CSS Wildcard

I have been using the free NinjaForms plugin on my WordPress site. The default styling for labels is bold, but I prefer them to be lighter. Currently, I achieve this through CSS by targeting individual field IDs. However, this method becomes tedious when a ...

csswildcard

Displaying elements side by side on larger screens and centered on smaller screens

Is there a way to arrange elements next to each other on wider screens, aligning them left and right, while also centering one above the other on narrower screens? Preferably without using media queries: ...

cssbootstrap-4

The stylesheet malfunctioned while attempting to load varying layouts in separate controllers

Hey, I encountered a strange issue. After clicking on the three pages displayed in the images below: Step 1 controller welcome Step 2 other controllers Step 3, back to step 1 view controller welcome The final image, when returning to controller welcom ...

cssruby-on-railsasset-pipelineturbolinks

The functionality of Small Caps is not supported by Twitter Bootstrap when using Chrome browser

I am working with a very basic markup <h1> <a href="#"> My Title </a> </h1> and I have this CSS applied h1 { font-variant: small-caps; } You can see the result on this jsfiddle link. The problem arises when u ...

csstwitter-bootstrap

What steps can I take to stop my html table from expanding beyond its intended size

There are instances where the length of a data piece in one of my table cells causes it to expand and distort the overall layout of the table. Is there a way to avoid this from happening? ...

htmlcss

Positioning the footer to sit at the bottom of my webpage, leaving a pleasing margin at the top

One technique I frequently use to ensure my footer stays at the bottom of my page is by utilizing an empty div. Here's how the code looks: <body> <div id="canevas"> <article>My website's content</article> ...

htmlcssfooter

Responsive full-screen background image display

Why is the background image not appearing as a full image on large screens but fitting fine on small screens? <!DOCTYPE html> <html dir="ltr"> <head> <meta charset="utf-8" dir="ltr" /> <title ...

cssimagebackgroundfrontend

stop initial focus on input field in Ionic

One issue I'm facing is that my login screen for the application automatically focuses on the 'username' input field and triggers the keyboard to pop up. This causes the contents of the login screen to push up, resulting in incorrect dimensi ...

csshtmlangularjsionic-framework

Having trouble making setTimeout work with a nested function in it

I've encountered an issue with the setTimeout() function. Take a look at my code snippet below: $('#start').click(function(event) { var result = Math.floor(Math.random() * (10000 - 4000 + 1)) + 4000; // generates a random value between ...

jqueryhtmlcss

How come characteristics of one particular div element are transferring to unrelated div elements?

Recently, I created a small practice website and encountered an issue that is quite frustrating. Here's the div structure I used: <div class="work-process"> <div class="container" align="center"> <div class="col- ...

htmlcss

Customizing the style of react-select is essential for creating a unique and visually appealing user experience

I am looking to maintain the visual style of my input fields to match that of a react-select component. I have been advised to use styled-components, yet I am uncertain about which styles need to be adjusted in order to achieve the desired outcome. Ideally ...

cssreactjsstyled-componentsreact-select

CSS and JavaScript dropdown malfunctioning due to a position swap in internal CSS

This example demonstrates functionality .c1 { background-color:red; position:relative; } .c2 { background-color:blue; position:absolute; height:50px; width:100px; display:none;} .show { display:block; } <body> <button ...

javascriptcss