How can you adjust the height of flexbox items to be aligned?

I am struggling to create a unique flexbox layout with a large amount of text in the center area. As I resize the window (specifically reducing the height), I notice that the columns on the sides do not align properly with the main article, resulting in content being cut off. I have experimented with various attributes such as min-height, max-height, and align-items within flexbox, but it seems like there is some fundamental concept that I am missing.

Any assistance in understanding this would be greatly appreciated.

Feel free to check out my fiddle.

Edit: Take a look at this image showcasing the issue of content being cut off when scrolling down on a smaller window size, leaving white space on the site.

htmlcssflexbox

Answer №1

You currently have numerous style attributes setting heights that are unnecessary. Consider removing them and making a few adjustments.

To ensure .mains fills the entire height, follow these steps:

  1. Set body to display: flex; and flex-direction: column;.
  2. Set body to height: 100vh;.
  3. Set .mains to flex: 1, which will fill the entire space.

These changes should be sufficient. Here is an example for reference:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: white;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

nav {
  position: sticky;
  top: 0;
  width: 100%;
  padding: 1rem;
  background-color: black;
}

footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  padding: 1rem;
  background-color: black;
}

.mains {
  flex: 1;
  display: flex;
  background-color: red;
}

.left, .right {
  width: 20%;
}

.left {
  background-color: orange;
}

.right {
  background-color: grey;
}

article {
  width: 60%;
}
<body>
  <nav>
    <span>Home</span>
    <span>News</span>
    <span>Contact</span>
    <span>About</span>
  </nav
    >
  <div class="mains">
    <aside class="left">
      <p>left</p>
      <p>left</p>
      <p>left</p>
    </aside>
    <article>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est nemo odit mollitia aliquam deserunt vel fuga ratione veritatis praesentium nam ipsam magnam tenetur illo, ipsa nobis totam. Aperiam, eligendi blanditiis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ratione voluptas magni eaque dicta recusandae voluptate perferendis, quas quod excepturi mollitia tenetur in dolorum. Qui, magnam molestias! Ex... (remaining text truncated)
    </aside>
  </div>

  <footer>
    <a href="">Sitemap</a>
    <a href="">Home</a>
    <a href="">News</a>
    <a href="">Contact</a>
    <a href="">About</a>
  </footer>
</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

Utilizing HTML5 elements within CSS selector chains

Check out a live example here Modernizr has been successfully implemented; article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } However, the styles are not rendering in IE8 and below even though t ...

csshtmlrequirejsmodernizr

Tips for utilizing append and remove to modify HTML forms

Currently, I am working on a WordPress project that requires the use of append and remove for dynamically changing forms in HTML. I attempted to implement this functionality, but encountered some errors. The code snippet below provides a brief overview of ...

javascriptjqueryhtmlwordpressforms

HTML makes column text wrapping automatic

Is it feasible to implement text wrapping into two columns or more in HTML using solely CSS? I have a series of continuous text enclosed within p tags only, structured as follows: <div id="needtowrap"> <p>Lorem ipsum dolor sit amet, ...&l ...

htmlcsstext

Steps to implement an image zoom function triggered by a button click

I'm working on a school project that requires me to use only html, css, and javascript for creating a website. Currently, I'm designing a landing page with a button that will navigate the user to another page. My goal is to have the background im ...

javascripthtmlcss

Stay afloat at the bottom of the webpage without using xhtml

Currently working on Moss 2007 and in need of creating a floating button at the bottom of the screen. This button should move down as I scroll down and up when scrolling back up. Although it can be easily achieved with xhtml, the challenge lies in not bei ...

htmlcsssharepoint-2007

Troubleshooting: How can I ensure my custom scrollbar updates when jQuery niceselect expands?

I am currently utilizing the jquery plugins mCustomScrollbar and niceselect. However, I have encountered an issue when expanding the niceselect dropdown by clicking on it - the mCustomScrollbar does not update accordingly. I suspect this is due to the abso ...

javascriptjqueryhtmlcss

The perfect method for creating template literals using a function

I have a function that accepts an argument called id and returns a template literal: const generateTemplate = (id) => { return `<div style="box-sizing: border-box; height: 32px; border-bottom: 1px solid #ECECEC; color: #282828; padding: 8px; dis ...

javascripthtmlarraysloops

Step-by-step guide on implementing a see-more/read-more feature using only anchors in the HTML

I am currently developing a website that will be managed by individuals who are not very tech-savvy. I want to empower them with the ability to add "see-more" anchors that utilize jQuery slide up/down functionality to reveal content. While my code works w ...

javascriptjqueryhtml

Creating smooth transitions using Angular's ngif directive along with CSS animations to slide elements in and out

I am currently working on a side panel that needs to slide in and out when a button is clicked, and I want to achieve this using pure CSS. However, I'm struggling to make the transition smooth. I've experimented with keyframes but haven't b ...

cssangularjsanimationng-animate

Make sure to place the <i> tag within the <li> tag at the bottom to automatically resize the height

Currently, I am working on customizing my menu design with a mix of bootstrap and font awesome CSS styles. It would be easier to demonstrate the issue on a live page. My main objectives are two-fold: I want to position the chevron icon at the bottom with ...

javascriptjqueryhtmlcsstwitter-bootstrap

Applying SVG filters in conjunction with CSS transitions

While working on an SVG filter with CSS animation, I utilized the following code: <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result= ...

htmlcssanimationsvgcss-transitions

What is the best way to elegantly display a block containing background and text using Angular and ngAnimate?

I'm a beginner when it comes to JavaScript and Angular. I am attempting to use ng-show and ng-hide for my background and text elements. However, I am experiencing an issue with my text: It smoothly hides, but when it is shown again, the text appears b ...

javascriptcssangularjsng-animateng-show

keep the color of the link after clicking until a different link is clicked

At the bottom of every post on my website, there are 3 buttons: "Written By", "Related Post," and "In This Category": SoCatchy! I'm looking to have each button change color when clicked, and stay that way until another link is clicked. Here is the c ...

jqueryhtmlcsscolors

Steps to resolve background image problems

Currently encountering issues with the application where the background image is not showing up behind the login form. This problem arises while using a bootstrap template for the website. Attempted to set the background image in the .main-content div with ...

htmlcssasp.net-corefrontendweb-frontend

Is there a method in AngularJS to automatically set app.comment to null if the point is not equal to 1 using front end logic?

Can we verify on the front end in AngularJS if app.point !=1 and app.comment==null? <td> <input type="number" max="5" min="1" ng-init="app.point=5" data-ng-model="app.point"> </td> < ...

javascriptangularjshtml

Calling functions in AngularJS/HTML can help you execute specific

Just started with angularjs and facing some major issues haha... I have something that seems to be working fine, but I can't figure out what's wrong with this code... can someone please help me? Here it is: Basically, the scope.create function ...

javascripthtmlangularjs

Having trouble getting the Bootstrap 5 Modal to function properly within an Electron app

Facing an issue with my web app using Bootstrap 5, as the modal is not displaying properly. Below is the HTML code for the modal and the button that triggers it: <div class="modal" tabindex="-1" id=&quo ...

javascripthtmltypescriptbootstrap-modal

Choose the desired options to add to the selection box

Here is a question that I have: <select class="myselect"> <option value="option 1">option 1</option> <option value="option 2">option 2</option> <option value="option 3">option 3</option> <option value="option 4 ...

jqueryhtmlselect

Dropdown menu featuring a customizable input field

Is it possible to have a drop-down list with an input textbox field for creating new items in the same dropdown menu? ...

javascriptjqueryhtmlcssbootstrap-4

Having trouble with the jQuery load function not functioning properly

I have encountered an issue with this code snippet while running it on XAMPP. The alert function is working fine, but the HTML content fails to load. I have included links to jQuery 3.2.1 for reference. index.html $(document).ready(function(){ $("#b ...

javascriptjqueryhtml