Element with absolute positioning and full width extends past its containing element

I'm trying to achieve a display: flex with position: fixed that has the same width as its parent. However, my current code is extending beyond the boundaries of the parent container.

Here's what I've attempted so far. Please review the fiddle link below.

.container {
  width: 400px;
  padding: 5px;
  background-color: red;
}

.flex {
  display: flex;
  position: fixed;
  height: 100px;
  width: 100%;
  background: pink;
}
<div class="container">
  <div class="flex">
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
  </div>
</div>

I am looking for the .flex container to match the width of its parent .container when set to width: 100% and position: fixed.

htmlcssflexbox

Answer №1

Opt for using the position:sticky property

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

::before,
::after {
  box-sizing: inherit;
}

.container {
  width: 400px;
  height: 200vh;
  padding: 0 5px;
  background: linear-gradient(red, blue);
}

.flex {
  display: flex;
  position: sticky;
  top: 0;
  height: 100px;
  background: pink;
}
<div class="container">
  <div class="flex">
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></div>
  </div>
</div>

Answer №2

If you're looking for an alternative to using position:sticky, consider using inherit when the parent element always has a defined width in pixels rather than percentage:

.container {
  width: 400px;
  padding: 5px;
  background-color: red;
}

.flex {
  display: flex;
  position: fixed;
  height: 100px;
  width: inherit;
  background: pink;
}
<div class="container">
  <div class="flex">
    <div class="items"></div>
    <div class="items"></div>
    <div class="items"></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

Capturing Click Events from Elements Below: A Step-by-Step Guide

In my layout, I positioned two tables side by side. Each table contains clickable items. By adjusting the margins and using relative positioning, I successfully moved the second table to be below the first one. However, a problem arose where clicking on it ...

javascripthtmleventsclick

Ensuring that Bootstrap rows fill the entire height within a column

While working on a template with nested rows and columns in Bootstrap, the layout ended up looking like this: <div class="col-5"> <div class="row"> <div class="col-3 border border-secondary">Truck Number</div> ...

javascriptcssbootstrap-4

Tips for adjusting the height of a selection box in jQuery Mobile

I am trying to make the select box height the same as the label (模板分類:). <select id="TamplateClass" style="height:1.5em">...</select> you can use CSS #TamplateClass{height:1.5em;} However, no matter what I try, the results are all th ...

cssjquery-mobile

Can the arrangement of divs be altered solely based on specific browser widths, rather than just for visual appeal?

Imagine having the following HTML structure: <div class="outer"> <div class="inner"> </div> </div> However, under the condition @media (min-width: 890px) and (max-width: 958px), you want it to look like this: <div clas ...

javascripthtmlcss

What is the method for incorporating a dotted line preceding the menu options?

I am currently working on an asp.net menu that looks like this: <div id="left"> <div id="menus" runat="server"> <div id="left_menu"> <div class="abc"> < ...

asp.netcss

Tips for resizing a 100% div without displaying vertical scrollbars in the browser

I am facing an issue with a table that has three rows. I have a main #container div with a height of 100%, and inside it is a table with 3 rows. The first and last row contain fixed size content. However, in the second row, there is a #content div with a h ...

javascriptjquerycss

Is it necessary to contain every element within a row and column in the Foundation or Bootstrap grid system?

I have been exploring both Foundation and Bootstrap frameworks lately. A theoretical question came to my mind - do I always need to place each element inside .row>.column (for Foundation) or .container>.row>.col-- (for Bootstrap), even if I don&ap ...

csszurb-foundationfrontendtheorybootstrap-4

How to set a maximum width in IE8 when using width:100%?

After researching online, I am still unable to get it to work. I have a basic HTML layout that I have been testing across different browsers. Knowing the quirks of IE, I wasn't surprised when the max-width CSS code didn't function as expected. Ho ...

css

Using a JavaScript class rather than an ID for toggling visibility

As a complete newbie to JavaScript, I've come across similar questions but I'm lost when it comes to coding - help needed! So here's the code I have so far, and I'm hoping someone can assist me. Currently, I have JavaScript set up to s ...

javascriptjqueryhtmlcss

Display of certain special characters such as ">" may be affected when using UTF-8 encoding

Here are the codes I'm working with: ul.pathnav a:before{ content:"\0X3E"; text-decoration:none; } I have been trying to use the hex code \0x3e for ">", but it doesn't seem to be working. However, when I tried usi ...

htmlcssencodingutf-8

Is there a callback or event that can be used to ensure that getComputedStyle() returns the actual width and height values?

Currently, I find myself in a situation where I need to wait for an image to load before obtaining its computed height. This information is crucial as it allows me to adjust the yellow color selector accordingly. Question: The process of setting the yello ...

javascripthtmlcss

using node-sass with several different starting points

I am currently working on a project where my main entry point is structure.scss, and each platform has its own second entry point. Here is the folder structure: scss/ | |-- components/ # Modular Component Files | |-- login.scss ...

cssnpmsassscss-lintnpm-scripts

Encountering difficulties in running bootstrap on nodejs

As a beginner in node.js and bootstrap, I am eager to create my own personal website, so I found some tutorials to help me get started. After downloading bootstrap 2.0.2 and unzipping it, I organized the files by placing bootstrap and bootstrap-responsive ...

javascriptcssnode.jstwitter-bootstrap

Angular <select><option> tags are missing from the browser display, although they are present in the source HTML code

After incorporating a dropdown list into the FormGroup, it seems to be missing from the browser display. Upon inspecting the page's HTML source on Chrome, I noticed that the <select><option></option></select> element is present ...

javascripthtmlangularangular-material

Utilizing CSS to create a zoom effect on hover for an image while preserving its original size was successful, however, the issue arises as only a corner of the image is visible

On my webpage, I have implemented an image that zooms in slightly when hovered over. Unfortunately, this animation has caused the image to only display one part regardless of whether hover is activated or not. I've attempted to troubleshoot by adjusti ...

htmlcssbootstrap-4

Discovering the clicking actions on PDF elements within an HTML environment

I am currently working on developing a web application that involves rendering various pdf objects. My main goal is to be able to detect the position of a click inside the pdf container. However, it seems like the OnClick event is not functioning as expe ...

javascriptjqueryhtml

`Inconsistency in image width behavior observed in Opera browser`

I am very new to HTML and CSS3. I am teaching myself as I work on creating a new website. For some reason, my image gallery is not displaying properly in Opera browser. The width of portrait images appears distorted only in Opera, whereas landscape images ...

htmlcssoperaimage-size

Use the nobr HTML tag on Django form fields

I have been customizing Django form fields using this helpful guide. Here is the form structure: class contact(forms.Form): first_name = forms.CharField() middle_name = forms.CharField() last_name = forms.CharField() This is how the template ...

htmlcssdjangodjango-templates

The ideal way to markup a calendar: including a list of times, day containers, and events

Currently, I am creating markup for a one-day calendar display. The calendar consists of a list of times on the left side, ranging from 9am to 9pm, and the events for the day on the right side. I have used a <table> for the list of times, a <secti ...

htmlsemantic-markup

The issue arises when I try to retrieve information from MySQL using Ajax, as it appears

I am currently working on developing an ecommerce website. In order to display products, I am fetching data from a database. My goal is to allow users to add products to their cart without having to refresh the page. I have attempted to use AJAX for this ...

javascriptphphtmlmysqlajax