Horizontal scrollbar in div doesn't display if div is in flexbox

Issue

As you can see from the picture, if the exactly same table which displays a horizontal scrollbar is placed in a flexbox the scrollbar will not display.

What could be the reason for this behaviour?

Here is the code.

File TestLayout1.razor

@inherits LayoutComponentBase
@Body

File TestPage1.razor

@page "/testPage1"
@layout TestLayout1

<div class="pageContainer">
<div class="navItem">
    <a href="">Main Page</a>
    <a href="counter">Counter</a>
</div>
<div class="pageItem">
    <p>Content</p>
    <div class="tableAntContainer">
        <table class="tableAnt">
            <thead>
                <tr>
                    <th>A1</th>
                    <th>A2</th>
                    <th>A3</th>
                    <th>A4</th>
                    <th>A5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>0.5</th>
                    <th>0.85</th>
                    <th>0.37</th>
                    <th>0.7</th>
                    <th>0.7</th>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="tableAntContainer">
<table class="tableAnt">
    <thead>
        <tr>
            <th>A1</th>
            <th>A2</th>
            <th>A3</th>
            <th>A4</th>
            <th>A5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>0.5</th>
            <th>0.85</th>
            <th>0.37</th>
            <th>0.7</th>
            <th>0.7</th>
        </tr>
    </tbody>
</table>

File TestPage1.razor.css

body {
overflow-x: hidden;}

.pageContainer {
border:2px solid black;
display: flex;
height:200px;}

.navItem{
background-color:aquamarine;
padding:1rem;}

.pageItem {
background-color: antiquewhite;
padding: 1rem;
flex: 1;}

.tableAntContainer {
border: 3px solid red;
display: flex;
overflow-x: auto;}

.tableAnt {
border: 1px solid black;
table-layout: fixed;
width: 500px;
margin: 0 auto;}

.tableAnt th {
border: 1px solid black;
text-align: center;
width: 120px;}

.tableAnt td {
border: 1px solid black;
text-align: center}

body {
  overflow-x: hidden;
}

.pageContainer {
  border: 2px solid black;
  display: flex;
  height: 200px;
}

.navItem {
  background-color: aquamarine;
  padding: 1rem;
}

.pageItem {
  background-color: antiquewhite;
  padding: 1rem;
  flex: 1;
}

.tableAntContainer {
  border: 3px solid red;
  display: flex;
  overflow-x: auto;
}

.tableAnt {
  border: 1px solid black;
  table-layout: fixed;
  width: 500px;
  margin: 0 auto;
}

.tableAnt th {
  border: 1px solid black;
  text-align: center;
  width: 120px;
}

.tableAnt td {
  border: 1px solid black;
  text-align: center
}

<div class="pageContainer">
  <div class="navItem">
    <a href="">Main Page</a>
    <a href="counter">Counter</a>
  </div>

  <div class="pageItem">
    <p>Content</p>

    <div class="tableAntContainer">
      <table class="tableAnt">
        <thead>
          <tr>
            <th>A1</th>
            <th>A2</th>
            <th>A3</th>
            <th>A4</th>
            <th>A5</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <th>0.5</th>
            <th>0.85</th>
            <th>0.37</th>
            <th>0.7</th>
            <th>0.7</th>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="tableAntContainer">
  <table class="tableAnt">
    <thead>
      <tr>
        <th>A1</th>
        <th>A2</th>
        <th>A3</th>
        <th>A4</th>
        <th>A5</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th>0.5</th>
        <th>0.85</th>
        <th>0.37</th>
        <th>0.7</th>
        <th>0.7</th>
      </tr>
    </tbody>
  </table>
</div>

Solution

Finally I found the solution.

I have to add to the pageItem min-width:0;

because the default setting of a flex item is auto.

Answered By - Bert