Tips for utilizing the fixed position within a flexbox design

I am working on a flexbox layout with two columns.

The left column needs to be fixed, while the right column should be scrollable.

Can you provide some guidance on how to achieve this?

Here is the code snippet that I have been using:

#parent {
  display: flex;
}
#left {
  flex-grow: 1;
}
#left div {
  position: fixed;
  background: blue;
  top: 0;
  left: 0;
  height: 100vh;
}
#right {
  flex-grow: 5;
  background: red;
  height: 300vh;
}
<div id="parent">
  <div class="child" id ="left">
    <div>
      ABC
    </div>
  </div>
  <div class="child" id ="right">
  DEF
  </div>
</div>

Fiddle

htmlcssflexbox

Answer №1

It seems that you are looking to have the right scroll while keeping the left fixed. This can be achieved without relying on fixed positioning.

In my opinion, I would suggest avoiding fixed positioning if possible, as it may lead to unexpected behavior on mobile devices and you might end up missing out on the advantages provided by non-positioned solutions like flexbox.

html, body {
  margin: 0;
}
#parent {
  display: flex;
  height: 100vh;
}
#left {
  flex-grow: 1;
  background: blue;
}
#right {
  flex-grow: 5;
  background: red;
  overflow: auto;
}
#right div {
  height: 300vh;
}
<div id="parent">
  <div class="child" id ="left">
      ABC
  </div>
  <div class="child" id ="right">
    <div>
      DEF
    </div>
  </div>
</div>

Answer №2

here is the solution

#container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: stretch;
}
#left-side {
  flex-grow: 1;
  background-color: lightblue;
}
#right-side {
  flex-grow: 3;
  background-color: green;
  overflow-y: scroll;
}
.scrollable {
  height: 200vh;
}
<div id="container">
  <div class="box" id="left-side">
    <div>
      Content A
    </div>
  </div>
  <div class="box" id="right-side">
    <div class="scrollable">
      Content B
    </div>
  </div>
</div>

Answer №3

Your comment was:

The fixed div's width does not depend on the parent element's width.

When you apply position: fixed to an element, it is taken out of the normal document flow and positioned relative to the viewport.

A fixed element doesn't consider its parent's dimensions within the HTML structure.

To achieve your desired outcome, you could make the entire layout fixed (as suggested in this answer). Alternatively, you might need to explore a JavaScript solution.

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

Trouble arising from Bootstrap 5's float-end on flex items

When I apply the float-end class, it shifts the button to the right, but the div tags next to it appear in front of it. https://i.sstatic.net/Mxu0P.png <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protecti ...

csstwitter-bootstrapbootstrap-5

What is the best way to deactivate div elements once an overlay has been applied to them?

My goal is to place an overlay on my form to prevent users from accessing the content. Even though I have added an overlay, users can still interact with input fields. How can I prevent that? .overlay { background: rgba(0, 0, 0, .75); text-align: ce ...

javascriptjqueryhtmlcss

Column content merging in BS layout

Currently, I am exploring how to implement a two-column layout with the left column serving as a scrollable navbar. At this early stage of development, please excuse any imperfections in the code! One issue that arose involved using the .sidebar class wit ...

csshtmlbootstrap-4

Tracking the number of headings within a table using HTML

I am having trouble formatting text in a table where the second column contains text, with some rows having headings ranging from H1 to H5. I want to use auto numbering for the headings, but the increment function doesn't seem to be working within the ...

htmlcsscss-counter

Blending vertical and horizontal Bootstrap panels to enhance spacing

I am facing challenges with creating a new layout in Bootstrap 5.3. I have a set of cards with 2-pixel gutters between them. Two of the cards need to be positioned vertically, utilizing half or nearly half of the height of the quarter-width card next to th ...

htmlbootstrap-5

Styling the "Browse" button for different web browsers

Here is the code snippet I am working with: HTML: <form> <input id = "file" type="file" /> <div id="custom_button">custom button</div> </form> Jquery: $("#custom_button").on("click", function () { $("#file"). ...

javascriptjqueryhtmlbuttonfile-upload

Having trouble obtaining data from the database and showing it on the webpage

I am encountering an issue with displaying content from a database named resources and a table within it also named resources. The code snippet causing trouble is as follows: mysql_connect('localhost', 'username', 'password', ...

phphtmlmysql

Trouble accessing data with AJAX

I am trying to retrieve content from a web page and display it on my own webpage using AJAX. However, I keep encountering an "Access denied" error before the specified page is fetched. It's important to note that the target page does not require any l ...

javascripthtmlajax

Populate HTML form with return values using jQuery AJAX

I am struggling with retrieving values from jQuery/AJAX and displaying them in an HTML form within the index.php file. This is what my index.php looks like: <script type="text/javascript"> $(document).ready(function () { $('#display'). ...

javascriptphpjqueryhtmlajax

Manipulate and scale with jQuery

I am currently utilizing the jQueryUI library with its Draggable and Resizable functionalities to resize and drag a div element. However, I am encountering some unexpected behavior where the div jumps outside of its container upon resizing. How can I resol ...

javascriptjqueryhtmlcssjquery-ui

Is there a way to display the # symbol instead of characters in the input text field?

I have a text input field in a PHP page with a maxlength attribute set to 11. This input field is specifically used for entering phone numbers. The requirement is that when the user types a phone number, it should display as "#" symbols for all 11 characte ...

javascriptjqueryhtmltextbox

Developing an AngularJS directive in place of a bulky jQuery function

I have a javascript function, mainly utilizing jquery, that I currently run when the page loads. My goal is to convert this into an angularjs directive, but I am facing difficulties in figuring out how to achieve it. As someone new to angular, any assista ...

javascriptjqueryhtmlcssangularjs

Uploading CSV files in Angular 4

I am currently working on an Angular4 project where I have implemented a feature that converts data into a CSV file with a header. Now, I am looking to reverse this process and allow users to upload a CSV file instead. To test this functionality, I create ...

htmljsonangularcsvtypescript

Encountered an error when attempting to use 'appendChild' on 'Node': the first parameter is not the correct type. It was able to work with some elements, but not with others

I'm currently working on a script that utilizes fetch to retrieve an external HTML file. The goal is to perform some operations to create two HTMLCollections and then iterate over them to display a div containing one element from each collection. Here ...

javascripthtmldomchild-nodes

Stop browser from downloading attached file

<a href="/scripts/script.pde" target="_blank"></a> My goal is to have the browser show this file as text in a new window. Once clicked, it will be downloaded onto the user's computer. ...

htmltexthyperlinkhref

How can I use jQuery to create an onClick event that expands text content on the right side of a portfolio

Hi there, I'm attempting to achieve a similar effect as the hover action in my first fiddle. I'd like to use jQuery click/toggle to expand the content instead of displaying it on hover. I've been working with basic addClass using jQuery/CSS ...

jqueryhtmlcss

Implementing dynamic classes for each level of ul li using JavaScript

Can anyone help me achieve the goal of assigning different classes to each ul li element in vanilla Javascript? I have attempted a solution using jQuery, but I need it done without using any libraries. Any assistance would be greatly appreciated! con ...

javascripthtmljquerytypescriptecmascript-6

What could be causing the sudden appearance of a white space in my modal window?

enter image description here I have a CSS issue where I set the width, unlike the source from which I created this code. Here is the example code: <div class="info-box visible-md visible-lg"> <a class="waves-effect waves- ...

htmlbootstrap-4

My intention is to ensure that the page is printed with the Background graphics checkbox pre-checked

When using the print button, I typically include the following code: onclick="window.print();" I also came across this code snippet to set a checkbox as checked by default: <style type="text/css" media="print"> * { -webkit-print-color- ...

javascripthtmljquerycssjquery-plugins

`Jump-start Your Development with jQuery Lightbox Centering`

Recently, I implemented a lightbox effect for images on my website. However, I encountered an issue where the lightbox was not centering properly in the window upon initial click. Instead, the lightbox would appear at the bottom of the page on the first cl ...

javascriptjqueryhtmlcssjquery-ui