Question 174193 in Html Question posted in
Some basic documentation can be found here.

Html – Two flex items at 50% width with oveflow-x: scroll won't shrink

I want a flex container to have 2 flex items (item A, and item B) with equal widths of 50% of the parent container.

Item B may contain very long strings without wrapping, and it should be scrollable along the X axis so that it maintains the width exactly 50% of the parent container.

Here’s the code I came up with which doesn’t work, because the item B expands beyond the desired 50%.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex w-full justify-center">
    <div class="flex flex-none">
      <div class="w-1/2 min-w-0 bg-[#4f4f61] py-8 text-white overflow-x-auto">Item A</div>
      <div class="w-1/2 min-w-0 bg-[#a0cecd] py-8 overflow-x-auto">
        Item BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
      </div>
    </div>
  </body>
</html>

JSFiddle: https://jsfiddle.net/y37hd8fm/5/

What Am i doing wrong?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I solved by by using grid layout instead of flexbox. Although still not sure why flexbox behaves this way and exceeds the item size of 50%.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex w-full justify-center">
    <div class="grid grid-cols-2">
      <div class="bg-[#4f4f61] py-8 text-white overflow-x-auto">Item A</div>
      <div class="bg-[#a0cecd] py-8 overflow-x-auto">
        Item BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
      </div>
    </div>
  </body>
</html>

    The other solution by Edwin works for the simplified example I provided too, but in my real-world code I needed the flex container to have a max width of 1400px, so I can't use max-w-full. And specifying max-w-[1400px] still has a messed up item B sizing when the browser width is less than 1400px.


  2. 0 
    .max-w-100{
  max-width:100%;
}
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex w-full justify-center">
    <div class="flex flex-none max-w-100">
      <div class="w-1/2 min-w-0 bg-[#4f4f61] py-8 text-white overflow-x-auto">A</div>
      <div class="w-1/2 min-w-0 bg-[#a0cecd] py-8 overflow-x-auto">
        BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
      </div>
    </div>
  </body>
</html>
    Login or Signup to reply.
  3. 0

    I see you have solved it with grid. But you can easily fix it in your first example by adding w-full to the container div (the parent of the two columns).

    If the parent does not have a width set, w-1 /2 may not work correctly as the browser is automatically setting a with to the parent based on the contents.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex w-full justify-center">
    <div class="flex flex-none w-full">
      <div class="w-1/2 min-w-0 bg-[#4f4f61] py-8 text-white overflow-x-auto">A</div>
      <div class="w-1/2 min-w-0 bg-[#a0cecd] py-8 overflow-x-auto">
        BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
      </div>
    </div>
  </body>
</html>

    https://jsfiddle.net/2x7ckop4/1/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search