The height of the child div protruding beyond the boundaries of the parent wrapper

I'm having trouble ensuring that the navigation stays within the boundaries of the wrapper. The navigation is contained within a wrapper with 100% height, and I want it to occupy the remaining height. Initially, I set the navigation to 100% as well, but then it overflowed out of the div. What am I missing in my approach?

body {
  background: blue;
  background-size: cover;
  font: 14px "Roboto", sans-serif;
  font-weight: 300;
  padding: 0;
  margin: 2% 4%;
}

* {
  box-sizing: border-box;
}

.wrapper {
  background: #fff;
  display: flex;
  flex-flow: row wrap;
  height: 100vh;
  border-radius: 5px;
}

.header {
  display: flex;
  flex-flow: row;
  height: 75px;
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: purple;
}

.box {
  padding: 10px;
  height: 100%;
}

.box:last-child {
  sborder-bottom: 2px solid #EBEBEB;
  sswidth: 100%;
}

.box:first-child {
  width: 223px;
  sborder-right: 2px solid #EBEBEB;
}

.main {
  padding: 10px;
  order: 2;
  height: 100%;
}

.side {
  border-bottom-left-radius: 5px;
  background: #292F32;
  color: #6B757D;
  padding: 10px;
  flex: 0 0 223px;
  order: 1;
  height: 100%;
}


/*# sourceMappingURL=style.css.map */
<body>
  <div class="wrapper">
    <div class="header">
      <div class="box">
        intersect
      </div>

      <div class="box">
        rest
      </div>
    </div>

    <div class="side">
      navigation
    </div>

    <div class="main">
      main content
    </div>
  </div>
</body>

htmlcssflexbox

Answer №1

What am I doing incorrectly?

The issue lies in the excessive use of height: 100% throughout your code, which can cause compatibility issues with Flexbox across different browsers.

An alternative approach would be to utilize Flexbox's own properties such as flex: 1, which will efficiently fill the remaining space or height within a flex column container.

To resolve this specific problem, you should consider wrapping the side/main elements, setting the inner wrapper to display: flex, and changing the outer wrapper to flex-direction: column.

The necessity for a wrapper arises from enabling wrap in a flex row container, where the align-content property determines whether the items will stretch and occupy the parent's height.

If you have assigned a fixed height to the header, it may result in a gap between the header and side/main sections unless the header's height remains constant even when content expands it.

In cases where fixed heights are used, rendering Flexbox unnecessary, an alternative like CSS Calc can be employed.

Additionally, I have eliminated redundant properties that were either unnecessary or set to their default values.

Stack snippet

body {
  background: blue;
  background-size: cover;
  font: 14px "Roboto", sans-serif;
  font-weight: 300;
  margin: 2% 4%;
}

* {
  box-sizing: border-box;
}

.wrapper {
  background: #fff;
  display: flex;
  flex-direction: column;           /*  added  */
  height: 100vh;
  border-radius: 5px;
}

.header {
  display: flex;
  height: 75px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: purple;
}

.box {
  padding: 10px;
}

.box:last-child {
  sborder-bottom: 2px solid #EBEBEB;
  sswidth: 100%;
}

.box:first-child {
  width: 223px;
  sborder-right: 2px solid #EBEBEB;
}

.wrapper-inner {
  flex: 1;                          /*  fill available space/height  */
  display: flex;
}


.main {
  padding: 10px;
}

.side {
  border-bottom-left-radius: 5px;
  background: #292F32;
  color: #6B757D;
  padding: 10px;
  flex: 0 0 223px;
}


/*# sourceMappingURL=style.css.map */
<body>
  <div class="wrapper">
    <div class="header">
      <div class="box">
        intersect
      </div>

      <div class="box">
        rest
      </div>
    </div>

    <div class="wrapper-inner">
      <div class="side">
        navigation
      </div>

      <div class="main">
        main content
      </div>
    </div>

  </div>
</body>

Answer №2

Simply include height:calc(100vh - 75px); in the .side class instead of using height:100%

What does that mean?

height:calc(100vh - 75px) 

--> 100vh represents 100 viewpoint units (thanks to @LGSon for pointing out my mistake) 
--> - 75px denotes the height of the `.header` class


body {
  background: blue;
  background-size: cover;
  font: 14px "Roboto", sans-serif;
  font-weight: 300;
  padding: 0;
  margin: 2% 4%;
}

* {
  box-sizing: border-box;
}

.wrapper {
  background: #fff;
  display: flex;
  flex-flow: row wrap;
  height: 100vh;
  border-radius: 5px;
}

.header {
  display: flex;
  flex-flow: row;
  height: 75px;
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: purple;
}

.box {
  padding: 10px;
  height: 100%;
}

.box:last-child {
  sborder-bottom: 2px solid #EBEBEB;
  sswidth: 100%;
}

.box:first-child {
  width: 223px;
  sborder-right: 2px solid #EBEBEB;
}

.main {
  padding: 10px;
  order: 2;
  height: 100%;
}

.side {
  border-bottom-left-radius: 5px;
  background: #292F32;
  color: #6B757D;
  padding: 10px;
  flex: 0 0 223px;
  order: 1;
  height:calc(100vh - 75px); <-----------HERE
}


/*# sourceMappingURL=style.css.map */
<body>
  <div class="wrapper">
    <div class="header">
      <div class="box">
        intersect
      </div>

      <div class="box">
        rest
      </div>
    </div>

    <div class="side">
      navigation
    </div>

    <div class="main">
      main content
    </div>
  </div>
</body>

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

visuals in lieu of radio buttons

Currently, I am working on customizing my radio buttons and I want to find a way to add images for both the checked and unchecked events without any compatibility issues across different browsers. I have tried various methods, but each one comes with its o ...

htmlcssformswebforms

Prevent images in Bootstrap carousel from being cropped while adjusting device height and width

I am attempting to implement a responsive bootstrap carousel similar to the one showcased in the airbnb example. My challenge lies in ensuring that the carousel remains responsive across all device sizes. I have tried setting fixed height and width for bot ...

htmlcssbootstrap-4

Excessive size of bootstrap form

I'm currently working on designing a form within a section that has a width of col-sm-8. The form consists of three columns: label, text input, and username check. I've designated the label to have a width of col-sm-2, the username check to have ...

htmlcsstwitter-bootstrap

Develop a responsive component on the right side

I am encountering an issue with creating a responsive div that matches the height of the image on the left side. I want to include text in this div, however, when I do so, the paragraph expands in height along with the div element when I attempt to change ...

htmlcss

A guide to updating a particular row and sending parameters with jQuery and AJAX

I am utilizing a JSON response to dynamically display table content. Here is the code I am using to display row values: var rows = ''; for(var i=0; i<response.response.length; i++) { rows += '<tr><td class="country">&ap ...

javascripthtmlajaxjson

Challenges with Html design

Hey there, I've got this HTML and CSS structure that I'm working on. My goal is to have all four divs in one line. Can someone please take a look and let me know what I might be doing wrong? Here's an example: https://jsfiddle.net/0ynnfmo5/ ...

htmlcss

Personalize Dropdown Menu, determining when to initiate the hide menu action

When creating a dropdown using ul and li tags, I am faced with the dilemma of determining the ideal time to hide the dropdown menu. The dropdown menu is designed to display values based on user input as they type, updating dynamically. Initially, I had se ...

javascriptjqueryhtmlcssdrop-down-menu

Steps to customize a CSS file within node_modules

Is there a way to make changes to a CSS file in the "node_modules" dependency without them being overwritten when I run npm install? I want to keep the modifications I've made to the node module files. ...

javascriptcssnode.jsnpmnode-modules

Deactivate the button upon submission and reactivate it once the submission is complete

Recently, I've implemented a script that successfully sends data to the server using ajax. However, I now have a new requirement - I need to disable the button during submission and then re-enable it once the process is complete. $(document).ready(fu ...

jqueryhtmlajax

Multiple keyup events being triggered repeatedly

Currently, I am developing an Angular 4 application. Within my component's HTML, there is a textbox where users can input text. As soon as the user starts typing, I want to trigger an API call to retrieve some data. The current issue I am facing is t ...

htmlangulartypescriptrxjs

What can be done to repair the gallery on this webpage?

Currently, I am experimenting with the Aria template, a free Bootstrap-based template. My goal is to utilize the gallery feature without any accompanying text. However, even after removing the text from the lightbox, the white background persists. What I s ...

jquerycssbootstrap-4gallery

Incorrect synchronization in the SVG arrow animation

How come the arrow doesn't start moving at the same time as the line? Is there a synchronization issue? I want the arrow to begin its journey simultaneously with the line. .container{ width:100%; padding:0px; background-color: black; } .squig ...

htmlcsssvg-animate

Several adhesive panels on a dynamic webpage

In the content area of my page, a dynamic number of rows are generated. Each row consists of two columns: a side block and a content area. The goal is to have the side block stick while the page scrolls down until the next block appears and pushes the prev ...

javascripthtmlcssmootoolssticky

The dropdown feature of the Angular-UI typeahead directive is not functioning

Recently, while using the AngularUI typeahead directive, I encountered an issue where the dropdown appeared cut vertically with a scrollbar on the right. Despite this visual glitch, all the data was displaying correctly within the typeahead box. The image ...

cssangularjsangular-ui

Expanding Gridview Width within a Container in ASP.Net: A Step-by-Step Guide

https://i.stack.imgur.com/ZaJE7.jpg After viewing the image above, I am facing a challenge with stretching and fixing a gridview to contain the entire div where it is placed. The issue arises when the gridview adjusts automatically based on the content&ap ...

javascriptc#jquerycssasp.net

Unlocking the power of setting dynamic meta content

When using EJS for templating in my node.js webserver, everything has been running smoothly except for one issue. After integrating the head file into a page, I encountered the following error: SyntaxError: Unexpected identifier in /home/runner/superstrap/ ...

htmlcssnode.jsexpressejs

Unresponsive Hover Effect on iPad

I've implemented a hover effect on the menu for my one-page website. When a user hovers over a navigation link on desktop, the color changes to #ed1c28. .nf-navbar .navbar-collapse a:hover { color: #ed1c28; } Additionally, when a user clicks on a ...

htmlcssipaddevice-compatibility

Unable to See Success Notification on First Attempt

I am facing an issue with displaying a message when adding a new record. The first time I add a record, the message shows up correctly. However, if I try to add another record, the message does not appear even though the record is added successfully. Here ...

javascripthtmljquery

Tips for updating the iframe src dynamically with JavaScript

I'm trying to develop a function that can dynamically change the src attribute of an iframe element. I have an array containing URLs of four different locations, but I'm not sure whether I should use const matches = document.querySelectorAll("ifr ...

javascripthtmliframe

Columns with adjustable widths

I am looking to create a layout with 3 columns (which may change, could be up to 4) that are all flexible width and fill the screen. Does anyone know if this is possible using CSS? Basically, I want three blocks lined up horizontally that take up the enti ...

htmlcss