Making the child element expand to the full width of its parent while maintaining an overflow-x:auto property

Is there a way to stretch a child div without specifying fixed widths? Even when trying to wrap items and child in one wrapper div, the child div always takes up 100% width. Not full horizontal width. Thank you.

.parent {
  background: skyblue;
  width: 350px;
  overflow-x: auto;
  white-space: nowrap;
}

.child {
  background: springgreen;
  white-space: normal;
}

.item {
  width: 50%;
  background: red;
  display: inline-block;
}
<div class="parent">

  <div class="item">
    This is some v y erty erty erty
  </div>
  <div class="item">
    This is serty erty erty erty erty
  </div>
  <div class="item">
    This is somerty erty erty erty ert
  </div>

  <div class="child">
    This .child div should extend horizontaly
  </div>

</div>

https://jsfiddle.net/45b0ypcq/2/

css

Answer №1

Give this a shot:

.parent {
  background: skyblue;
  width: 350px;
  overflow-x: auto;
  display: flex;
  flex-wrap: wrap;
}

.parent div {
  flex: 0 33.333%;
}

.parent .child {
  background: springgreen;
  flex: 0 100%;
}

.item {
  background: red;
}
<div class="parent">

  <div class="item">
    This is some v y erty erty erty
  </div>
  <div class="item">
    This is serty erty erty erty erty
  </div>
  <div class="item">
    This is somerty erty erty erty ert
  </div>

  <div class="child">
    This .child div should extend horizontaly
  </div>

</div>

Here is a more adaptable CSS grid solution:

.parent {
  background: skyblue;
  width: 350px;
  overflow-x: auto;
  white-space: nowrap;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 5px;
  grid-template-areas: 
    "item1 item2 item3"
    "child child child";
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.child {
  background: springgreen;
  grid-area: child;
}

.item {
  background: red;
}
<div class="parent">
  <div class="item item1">
    This is some v y erty erty erty
  </div>
  <div class="item item2">
    This is serty erty erty erty erty
  </div>
  <div class="item item3">
    This is somerty erty erty erty ert
  </div>

  <div class="child">
    This .child div should extend horizontaly
  </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

Unable to place text inside an image using Bootstrap

My issue pertains to text placement on images, which is behaving oddly in my code. The problem seems to stem from a hover system I have implemented, where the text only displays correctly when triggered by a hover event. My code snippet below addresses the ...

htmlcssbootstrap-5

Unable to navigate through bootstrap dropdown items using keyboard shortcuts

I am currently working on a bootstrap dropdown menu that is filled with time zone details. Everything seems to be in order as the dropdown gets populated correctly. However, when I click on it and try to select an item by pressing a key on the keyboard (fo ...

javascripthtmlcssangularjstwitter-bootstrap

Incorporate a CSS class name with a TypeScript property in Angular version 7

Struggling with something seemingly simple... All I need is for my span tag to take on a class called "store" from a variable in my .ts file: <span [ngClass]="{'flag-icon': true, 'my_property_in_TS': true}"></span> I&apos ...

javascriptcssangulartypescriptangular7

Image expansion

I have a container element div that holds various content of unknown length. How can I add a background image that extends the entire length of the container since background-images do not stretch? I attempted to use a separate div with an img tag inside. ...

htmlcss

Attempting to simulate a camera shutter effect using div elements

I've been attempting to create a circular camera shutter, but I'm facing difficulties in making it look accurate. This is the desired outcome: https://i.sstatic.net/oS7gT.jpg The first 'petal' should be positioned lower than the last ...

htmlcsscss-shapes

How to link external css files in a Node.js project

Can I add an external CSS file in node.js using EJS? I attempted to do so, but encountered difficulties: app.use('/static', express.static('/view')) I included the CSS in EJS like this: <link rel="stylesheet" type="text/css" href ...

cssnode.jsexpresssassejs

Mudblazor - Tap or click within the designated area to trigger the drag and drop functionality

I have incorporated the Mudblazor CSS framework into my Blazor WebAssembly project. Within the drag and drop zone, I have included a button that is supposed to remove each uploaded image. However, when I click on the remove button, it only opens up the fi ...

javascriptc#cssblazormudblazor

JS animation triumphant

I have developed an app that utilizes a checkbox to control the appearance of an overlay on a screen. To ensure smooth transitions, I have incorporated animations into the process. #overlay{ position:absolute; height: 100vh; width: 100vw; ...

javascriptcssanimation

Tips for ensuring long text wraps to the next line when it exceeds the width of the browser window

I'm struggling with CSS styles and properties. I want the text to wrap to the next line instead of overflowing off the browser screen. I've illustrated what's currently happening versus what I actually need. https://i.stack.imgur.com/mPGt8 ...

htmlcss

CKeditor does not accept special characters or diacritics in keywords

Recently, I came across a helpful code snippet for CKeditor that counts and ranks the most used words in a textarea. This feature is invaluable for generating SEO-keywords suggestions while writing articles. However, there is an issue with non-English char ...

javascripthtmljquerycssckeditor

Achieving Centered Items with CSS Flexbox and Positioning

Struggling to arrange 3 elements using flexbox while keeping them centered both horizontally and vertically. Here is the desired layout: https://i.sstatic.net/Uo6WS.png This is my current attempt, but it's not working as expected. Can anyone spot t ...

htmlcssflexboxflexboxgrid

I am looking for a way to add some color to the text within a div on my HTML page. Can you help me

Is there a way to apply background color only to the text content within this div, without styling the entire element? ...

javascripthtmlcss

Fixing the CSS 404 error caused by using variables in Flask routes: A step-by-step guide

I have created a basic web application to showcase book reviews. Upon a successful search, users are provided with links to book titles - when a link is clicked, the goal is to pass the ISBN of the selected book to the url_for method and then present the c ...

htmlcsspython-3.xflask

Having difficulty navigating the website due to the inability to scroll

I am experiencing a problem on this website where I am unable to scroll. Visit www.Batan.io After loading the website for the first time, the trackpad (mac) works fine initially but then the scroll function stops working. Although the sidebar works, chan ...

htmlcssscroll

Tips for moving a title sideways and adjusting the bottom section by x pixels

I am seeking to accomplish a design similar to this using CSS in order to create a title of <h1>DISCOVER <span>WEB 3</span> DIMENSIONS</h1>. How do you recommend achieving this? Thank you, I have searched on Google and asked frie ...

htmlcss

Transferring items between containers with stylish animations in AngularJS

Two of my divs have different contents, with one initially empty and the other filled with items. By clicking on an item in the first list, I want to transfer it over to the second list through a visual animation that implies movement from right to left. W ...

cssangularjscss-animationsangularjs-animation

What is the reason behind LESS displaying arithmetic operations as text instead of performing them?

Whilst composing the subsequent operations @a: 2px @variable: @a + 5; .margin-style{ margin-left: @variable; } The code above compiles into .margin-style{ margin-left: 2px + 5; } Rather than margin-left:7px; What could be causing this issue? ...

htmlcssless

Modify the text or background shade of the Bootstrap date picker

I have successfully integrated the bootstrap date picker (view figure below) and it is functioning as expected. The code appears like this: <div class="input-group date"> <input name="departure" type="text" class="form-control" id="departure" ...

jquerycsshtmltwitter-bootstrap

continuously repeating css text animation

How do I create an animation loop that slides infinitely, repeating non-stop in full screen without breaking at 'hello5'? I want to display 3 rows of the same item from my items array. Not sure which CSS is causing the issue. The result I am loo ...

htmlcssvue.js

Using an ellipsis in a hyperlink within a list item conceals the bullet points of the list

When I apply an ellipsis to the text within a list element that has disc bullet points, it hides the bullet point itself. I discovered that applying overflow: hidden to the list will also hide the bullet point. Moving this rule to the anchor within the li ...

htmlcss