Flexbox overflow

Question

I am struggling to implement the following page layout. My entire page gets horizontal scrollbar due to the wide <div> element containing "Content". I would, instead, like to have a horizontal scrollbar only on the red <div> element that is wrapping it. I can't seem to make flexbox expand elements to the width of the page, but then to stop at the end and let the scrollbar take over the wide element overflow.

I cannot afford to set fixed widths on any of the elements.

<!-- Must maintain display: flex; -->
<div style="display: flex; flex-direction: row; height: 100%;">

   <div style="background-color: pink;">
      <div style="padding: 20px; background-color: blue;">Menu Item A</div>
      <div style="padding: 20px; background-color: purple;">Menu Item B</div>
      <div style="padding: 20px; background-color: violet;">Menu Item C</div>
   </div>

   <div style="background-color: yellow; flex-grow: 1;">
    
      <div style="margin: 20px;">
         <!-- The following red div should have horizontal scrollbar -->
         <div style="background-color: red; padding: 20px; overflow-x: auto;">
            <div style="width: 5000px; background-color: beige;">
               Content
            </div>
         </div>
      </div>
    
   </div>
</div>

Is it possible to achieve this without setting fixed widths? I would much prefer to use flexbox over tabled page layout.

Usama · Accepted Answer · 2022-06-06 11:15:18Z

2

Set the div which you don't want to have an overflow for to

overflow-x:hidden;

That should help.

answered Jun 6, 2022 at 11:15

Usama

1247 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Flexbox overflow

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related