Utilizing nested flex containers with overflow-x property

Question

Utilizing nested flex containers with overflow-x property

I'm looking to set up a layout with 2 columns side by side. The first column should have a fixed width of 200px, while the second column should take up the remaining space on the screen. Additionally, I want the content in the second column to auto-scroll horizontally. I've been attempting to use flexbox for this but I find myself confused by the markup. Could someone please help me understand what I'm doing incorrectly?

Path: html

<section className="container">
  <div className="container-name">1</div>
  <div className="container-time">
    <div className="element">
      222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222999999
    </div>
  </div>
</section>

Path: CSS

.container {
  flex: 0 0 auto;
}

.container-name {
  width: 200px;
  border: 1px dotted;
}

.container-time {
  flex: 0 0 auto;
  border: 1px solid;
}

.element {
  display: flex;
  overflow-x: auto;
}

html css

Answer 1

Answer №1

To achieve the desired result, you can follow these steps:

Apply max-width to the container
Set display: inline-flex; for the container
Add max-width to the container-time

.container {
  max-width: 100%;
  display: inline-flex;
}

.container-name {
  width: 200px;
  border: 1px solid red;
}

.container-time {
  flex-grow: 1;
  max-width: calc(100% - 200px);
  border: 1px solid green;
}

.element {
  display: flex;
  overflow-x: auto;
}

<section class="container">
  <div class="container-name">1</div>
  <div class="container-time">
    <div class="element">
      222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
    </div>
  </div>
</section>

Answer 2

To achieve the desired result, you can follow these steps:

Apply max-width to the container
Set display: inline-flex; for the container
Add max-width to the container-time

.container {
  max-width: 100%;
  display: inline-flex;
}

.container-name {
  width: 200px;
  border: 1px solid red;
}

.container-time {
  flex-grow: 1;
  max-width: calc(100% - 200px);
  border: 1px solid green;
}

.element {
  display: flex;
  overflow-x: auto;
}

<section class="container">
  <div class="container-name">1</div>
  <div class="container-time">
    <div class="element">
      222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
    </div>
  </div>
</section>

Answer 3

Answer №2

Expect this solution to assist you!

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

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  min-height: 100vh;
}

.container .split {
  position: relative;
  width: 100%;
  height: 100%;
}

.container .split__left {
  max-width: 400px;
  background-color: coral;
}

.container .split__right {
  padding: 2rem;
  overflow-x: scroll;
  background-color: pink;
}

.container .split__right p {
  white-space: nowrap;
}

<div class="container">
  <div class="split split__left"></div>
  <div class="split split__right">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
  </div>
</div>

[NOTE] view this on a larger screen.

Answer 4

Expect this solution to assist you!

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

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  min-height: 100vh;
}

.container .split {
  position: relative;
  width: 100%;
  height: 100%;
}

.container .split__left {
  max-width: 400px;
  background-color: coral;
}

.container .split__right {
  padding: 2rem;
  overflow-x: scroll;
  background-color: pink;
}

.container .split__right p {
  white-space: nowrap;
}

<div class="container">
  <div class="split split__left"></div>
  <div class="split split__right">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil repellat sapiente assumenda. Ex fugit at amet sed libero eaque. Debitis obcaecati aperiam hic possimus unde. Voluptatibus cumque illo dolores architecto.</p>
  </div>
</div>

[NOTE] view this on a larger screen.

Utilizing nested flex containers with overflow-x property

Answer №1

Answer №2

Similar questions

GWT integration for TinyMCE

Can the outcomes be showcased again upon revisiting a page?

Sorting Json Data Using Vue

How come a child element with a lower z-index than its parent doesn't appear behind the parent?

What is the best way to allow wider list items to overflow their absolutely positioned container?

I'm having trouble with my bootstrap dropdown and I've exhausted all of my options trying to fix it based on my current understanding

PHP is having trouble updating the database when multiple radio buttons are selected. It appears that only the most recent radio button selected will be updated in the database

Best Practices for Handling Form State in ReactJS with Redux

Dealing with empty POST request bodies in Node.js Express is a common challenge

Modifying Link Hover Colors with CSS and PHP

Adapting the position of a table row in AngularJS based on the

What is the best way to incorporate an image as an input group addon without any surrounding padding or margin?

Opacity is causing issues with hover effects in CSS

unable to show image retrieved from JSON data

Obtaining JSON data using Jquery results in the output of "undefined"

How to Customize the Navbar Position in Bootstrap 3 when the Brand/Logo is Collapsed

The search functionality in an Html table is currently malfunctioning

Is there a way to continually repeat a hover effect?

"Discover the process of using Puppeteer to extract information from a website, even when dealing with input fields that are set

Step-by-step guide to setting up Angular 2 with fullpage.js scrolloverflow