What is the best way to nest a div within a flexbox container?

I am attempting to create a div that is based on percentages, and I want to nest a div inside another. Specifically, I want the center (xyz div) to only take up 90% of the height of the content-div.

My goal is for the "content" div to be responsive to 90% of the height of the center div, positioned between the header and footer. However, it currently extends beyond the intended size based on browser dimensions.

https://i.stack.imgur.com/zvxrq.png


Here is my code: https://jsfiddle.net/thbx4pv2/

CSS:

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
    font-size: 4em;

}

.box .row {
  border: 1px dotted grey;
  flex: 0 1 30px;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}


.xyz {
    position: absolute;
  margin: 10 10 10 10 ;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
  height: 90%;
    overflow: auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

HTML:

<div class="box">
  <div class="row header">
    <p><b>header</b>
  </div>
  <div class="row content">
    <div class="xyz">
    <p>
      <b>content</b> (occupies remaining space)
    </p>
    </div>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

Answer №1

Eliminate the position attribute and implement the following modifications for the xyz category

margin: 10px auto 10px auto;
width: 90%;

Answer №2

To utilize position: absolute;, you must specify the element it should be positioned relative to.

In this situation, include .content{position: relative;} in your CSS.

Check out the revised fiddle with a reduced font size.

Answer №3

.xyz {
width: 70%;
box-shadow: 0 0 30px;
text-align:center;
-webkit-flex: 18 0 0; 
flex: 18 0 0; 
}

Take another look at this, my friend. By doing it this way, you can set fixed heights for the header and footer if desired. I've updated the HTML, so let me know if anything is unclear or needs further changes to align perfectly with your expectations. The borders are only there for demonstration purposes. The font size has been adjusted to be very small due to text overflowing. Please confirm if this solution meets your requirements.

http://codepen.io/damianocel/pen/XmxmQE

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

Create a grid div that expands vertically to completely fill the available space

I am encountering an issue with my grid layout involving the menu, header, and content. The problem lies in the fact that I want the content (blue box) to expand vertically within the grid element (yellow box). Currently, the grid stretches vertically, bu ...

Tips for binding data to numerous dynamic controls

Implementing reactive forms in my Angular project allowed me to create a simple form for adding employee work hours and breaks. The challenge I encountered was the inability to bind data from break controls. In the .ts file export class AddAppointmentForm ...

Identifying line breaks caused by browsers or CSS forced line breaks

<p style="width:60px"> This is just a sample text. It is a piece of text that doesn't really say anything meaningful.</p> When this text is rendered as HTML, it would look like this: This is just a sample text. It is a piece of text ...

The background color of the div or section is stubbornly refusing to change, no matter how much I tweak it

.forBackground { background-color: white; } .kontaktUndMapContainer { width: 100%; padding: 20px; color: gray; text-align: center; } .überschriftKontakt { margin-bottom: 20px; } .überschriftKontakt2 { margin-top: 20px; margin-bottom: 2 ...

Ways to make a div grow to occupy the leftover width without resorting to the overflow: hidden technique

<div id="container" style="width:100%;"> <div id="left1" style="float:left; width:100px;">float left</div> <div id="left2" style="float:left; width:100px;">float left</div> <div id="remaining">Remaining width&l ...

What is the significance of keyframes in CSS animations at different percentages

I'm facing a challenge with the code below that is intended to make objects float from left to right in the background. However, once they go off-screen, a vertical scroll bar appears despite the overflow-y: hidden attribute added to the class. I atte ...

Unusual sidebar scrolling issues experienced in Firefox

Currently, I am in the process of developing an app with a scrolling sidebar. However, there seems to be some unexpected behavior when using Firefox: the content within the sidebar disappears partially below the top of the div if the mouse is positioned lo ...

Generating an HTML report that includes a header and footer on every page using Firefox

I have been trying different methods, but none of them seem to work properly. My issue is with printing a html report with a header and footer on every page specifically in Firefox. A Possible Solution: <html> <head> <title></title&g ...

The issue of transform scale not functioning properly in conjunction with background clip and gradients in CSS

Looking to transform a div with the transform: scale(-1,1) property while using background-clip: text on the text within it. However, this causes the text to disappear. Here's what I've attempted: .reverse { transform: scale(-1, 1); } .gr ...

I desire for both my title and navigation bar to share a common border-bottom

As I embark on my journey into the world of HTML and CSS, my knowledge is still limited. Despite trying various solutions from similar queries, none seem to resolve my specific issue. What I yearn for is to have both my title and navigation bar share the s ...

The current state of my DOM doesn't match the updated value in my model. The update is triggered by a function that is called when a button is clicked

app.controller('thumbnailController', function ($scope) { debugger $scope.customers = [ { name: 'Ave Jones', city: 'Phoenix' }, { name: 'Amie Riley', city: 'Phoenix&ap ...

What is the best way to assign a unique color to two overlapping cells in an HTML table using HTML and jQuery?

I have a task to highlight a row or column when a checkbox is selected, similar to the example shown in the image below. How can I adjust the code so that the overlapping cell gets a different color instead of green or yellow? For instance, in the image b ...

Creating personalized HTML logs

My automated test script is set up in a way that automatically generates an HTML log file upon completion. You can find instructions on how to do this here. Is there a possibility to customize this HTML log or create my own HTML logger to replace the defa ...

Learn the process of importing data into an HTML list using Flask

Looking to transfer data from a Python variable to an HTML list? Here's a snippet of HTML code that you can test out: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Panel</title> & ...

Animating a background image to slide in from the bottom to the top using CSS transition

Here is a link to a codepen example: https://codepen.io/jon424/pen/XWzGNLe The current effect in this example involves covering an image with a white square, moving from top to bottom when the "toggle" button is clicked. I am interested in reversing this ...

Adding an additional border when combining two divs with rounded borders

I attempted to create a design similar to the Instagram "ask me a question" box, but I am encountering an issue where there is some extra border around the title when the two divs merge. What am I doing incorrectly? .info { overflow: hidden; ...

Enhancing Accessibility of the 'Return to Top' Link

Currently, I am designing a web page that requires users to scroll extensively. To enhance the user experience, I have included a back-to-top link at the bottom of the page for easy navigation back to the top. This is the HTML markup I have implemented: ...

What is the best method for creating uniform cards with different amounts of text that won't cause overflow issues?

At the moment, I have a container that acts as a boundary for a group of cards: .cards-container { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; margin-top: 20px; border: 5px solid violet; } .card { ...

Discover the secret to halting a CSS animation precisely on the final nth-child in CSS3

I have encountered some difficulty in stopping a crossfade animation on the last nth-child element. Although I am aware of using animation-fill-mode: forwards, implementing it in different places such as in the initial .crossfade declaration did not yield ...

Creating an automated HTML tag for a form input

https://i.sstatic.net/ZBDk2.png Is there a plugin to create form inputs like the one shown above? How can I add this feature to my own website? I would like for every user input to automatically add the < br > tag. ...