The content in the flex box item with horizontal scroll is overflowing beyond its boundaries

I am working with a flex box container that contains two child elements: a left side and a right side. I want the right side item to have a horizontal scrollbar in order to fit its content.

.container {
  display: flex;
  overflow: hidden;
  height: 300px;
}

.left-side {
  min-width: 100px;
  background-color: red;
  text-align: center;
}

.right-side {
  background-color: blue;
  overflow-x: auto;
}

.right-side > div {
  height: 50px;
  background-color: yellow;
  text-align: center;
  line-height: 50px;
}

.right-side > p {
  white-space: nowrap;
  background-color: yellow;
}

.notes {
  padding-top: 20px;
}
<div class="container">
  <div class="left-side">
    left side
  </div>
  <div class="right-side">
    <div>
      right side
    </div>
    <p>
      Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
      Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
      Paragraph Paragraph Paragraph Paragraph
    </p>
  </div>
</div>

Is there a way to achieve this using flexbox or any alternative methods?

Check out the demo here

htmlcssflexbox

Answer №1

I am creating blocks here to serve as containers.

  • Parent => Left : Right

Within these three container concepts, there is some super unattractive content.

  • The background colors and borders in this setup are deliberately ugly to illustrate the layout structure.
  • The body has been set to a standard default of 16px font size with no margins or padding for most browsers.
  • The parent-container has been given a grid layout with left and right columns; The left column has a specified min/max size, while the right column adjusts based on its contents.
  • A grid gap has been added to the parent container to visually separate the left and right sections.
  • The elements in the left side have been aligned to display how much control can be exerted within the container.
  • The right side is configured to align to the top of the block and include a scroll bar per the original poster's query.
  • Various elements with unappealing backgrounds have been placed on the right side to demonstrate both control within the container and containment due to the scroll setting.
  • The excessive CSS styling present serves the sole purpose of illustrating the structure, resulting in an overly exaggerated appearance.

body {
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.parent-container {
  display: grid;
  grid-template-columns: minmax(6.25rem, 25%) 1fr;
  grid-gap: 0.25em;
}

.left-side {
  align-self: start;
  background-color: #FF000011;
  height: 100%;
  text-align: center;
  border-right: 2px solid #FF000088;
  display: grid;
}

.right-side {
  background-color: #90EE90;
  align-self: start;
  scrollbar-color: rebeccapurple green;
  overflow-x: auto;
}

.right-side>.right-header {
  grid-row: 1 / 1;
  background-color: #FFFF00;
  text-align: center;
}

.right-side>.right-content {
  background-color: #FF80FF;
  display: grid;
}

.right-side .right-text {
  background-color: #FFFF00;
}

.next-child-right {
  justify-self: safe center;
  align-self: baseline;
  border: outset 1px #00FF00AA;
  border-radius: 1em;
  padding: 0.5em;
  background-color: #00FF00;
  margin-bottom: 1em;
}

.block-thing {
  justify-self: end;
  align-self: end;
  height: 3rem;
  width: 8ch;
  border: double #00FF00;
}

.blocky-child-right {
  width: 50rem;
  height: 3rem;
  border: solid blue 1px;
  text-align: end;
}

.block-header {
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 600;
  font-family: sans-serif;
}
<div class="parent-container">
  <div class="left-side">
    <div class="block-header">left side</div>
    <div>Next left</div>
    <div class="block-thing">block thing</div>
  </div>
  <div class="right-side">
    <div class="right-header block-header">
      right side
    </div>
    <div class="right-content">
      <p class="right-text">
        Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
        Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
        Paragraph Paragraph Paragraph Paragraph
      </p>
      <div class="next-child-right">I am the next content</div>
      <div class="blocky-child-right">blocky I am</div>
    </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

Ways to verify if a div is empty following an ajax request

When trying to load a php page into a div, I encountered an issue where the content of the div appeared empty. Despite attempting various methods to check if the div contained any html content after loading, I was unable to find a solution. ...

phpjqueryhtmlajax

exploring for a keyword on the primary Amazon platform (analyzing)

Hey everyone, I noticed that Amazon's main search bar code looks like this: <input type="submit" class="nav-input" value="Go" tabindex="7"> I'm considering creating a function that will locate this tag on amazon.co.uk and perform a search ...

htmlparsingseleniumbeautifulsoup

When adding files through drag and drop, the FormData is including a blank file field in the sent

I am currently working on a photo upload page that has drag and drop functionality enabled. Below is the form code: <form id="Upload" method="post" action="sessionapi/UserPicture/Upload" enctype="multipart/form-data"> <input class="box__file ...

javascriptjqueryhtmlajaxdrag-and-drop

Utilize JavaScript to iterate through a JSON object and retrieve the indices that meet the specified criteria

While I found a previous answer that somewhat addresses my issue, I am seeking guidance on how to return an array of the indexes where a specific value appears. For example, if **18A38** is the target value, it should return the positions [1,3]. The sampl ...

javascripthtmljson

Display information in a detailed table row using JSON formatting

I have set up a table where clicking on a button toggles the details of the corresponding row. However, I am having trouble formatting and sizing the JSON data within the table. Is there a way to achieve this? This is how I implemented it: HTML < ...

javascripthtmlcssrazor-pages

Button appears and disappears sporadically while browsing in Safari

I created a slider using SCSS, JavaScript, and HTML. You can view the demo at this link: https://jsfiddle.net/rr7g6a1b/ let mySlider = { initializeSlider: function (options) { let slider = options.container; let slides = slider.querySelectorAll( ...

javascriptcssmacossafarisass

Positioning of vertical linear gradients in CSS

Check out this live demonstration: http://jsfiddle.net/nnrgu/1/ I then adjusted the background position to 0px -70px and observed the changes here: http://jsfiddle.net/nnrgu/2/ The linear gradient seems to disappear! Am I doing something wrong, or is ...

css

Center text within a dropdown using Bootstrap styling

In a row within my inline form, I have both an email input and a dropdown. However, after resizing the page, the text within the dropdown is no longer positioned correctly (text on the left, arrow on the right). I attempted to fix this by using: text-alig ...

htmlcsstwitter-bootstrapbootstrap-4

Setting default selections for mat-select component in Angular 6

I've been attempting to preselect multiple options in a mat-select element, but I haven't been successful so far. Below is the snippet of HTML code: <mat-dialog-content [formGroup]="form"> <mat-form-field> <mat-select pla ...

htmlangulartypescriptangular-material

Identify all anchor elements that contain image elements

I am on the hunt. I am looking for a CSS-Selector, but if that's not an option, a jQuery selector would work too. ...

jquerycssimagecss-selectors

Display numerical data at precise locations above an image

Currently, I am working on a project where I am adding multiple marker pins to an image and saving their positions (x and y coordinates) to a database for later use. To see the code I have written so far, you can visit this link: https://jsfiddle.net/at3w ...

javascriptjqueryhtml

When an input is double-clicked, the message"[object object]" appears on the screen

Here is the structure of the template used for the directive. Our code fetches data from a service which contains all the details of a specific individual. We display only the first name, last name, and either designation or company affiliation from that d ...

htmlangularjscssfirefox

Issues with margin and padding-top not functioning properly when using @media for printing

Is there a way to add some space between the top of my webpage and my logo? I've tried adjusting the padding in my CSS, but when I check the print preview in Chrome, no spacing is visible. Below is my HTML code: <div class="container"> < ...

htmlcssmarginpaddingspacing

Disregard IDs when linting CSS in ATOM

Is there a way to configure csslint in Atom to exclude "ids" and prevent the warning "Don't use IDs in selectors" from appearing? Update: Despite my question being flagged as potentially duplicate, I delved deeper in my own research and ultimately fo ...

csshtmlatom-editorcsslint

Do specific elements of typography adjust according to the size of the window?

I'm always amazed by the creative solutions that come out of this community. So I'm reaching out to see if anyone knows a way to achieve something unique with CSS! Specifically, I'm curious if it's possible to make certain horizontal p ...

javascripthtmlcsstypography

An element that stands alone, not contained within another element

When working with the following HTML structure: <div> <span class="style-me">i want to be styled</span> </div> <div class="ignore-my-descendants"> <span class="style-me">i want to be styled but my parent prevent ...

csscss-selectors

What is the method of generating an HTML tag solely using CSS?

Looking to style HTML tags without altering them in any way? Consider this example: <div id="Code_G" class="editor-group"> editor-group<br /> <div id="Code_L" class="editor-label "> editor-label </div> < ...

htmlcss

Looking to update properties for elements within the Angular Material 16 mat-menu across the board?

Currently working with Angular Material 16 and I have a question regarding the height of buttons inside the mat-menu element. Here is an example of the code: <button mat-icon-button> <mat-icon>more_vert</mat-icon> </button> ...

cssangularangular-material

The <br/> tag is not functioning properly when retrieving text from a MySQL query

Currently, I am involved in a project that involves an A.I pushing text onto a MySQL database. Our goal is to display the ongoing writing process on a webpage. We are still actively working on this. We are retrieving the data and regularly checking the da ...

javascripthtmlmysqljson

Uniform selection frame width across nested list elements

I want to ensure that the width of the selection frame for all nested ul li elements is consistent, just like in this example. When hovering over an element (making the entire line clickable), I don't want any space on the left. Currently, I am using ...

htmlcssangularjs