Why doesn't overlflow: auto work on the x-axis?-CodePudding

I was trying to make a container which is supposed to overflow its content horizontally and display a scrollbar horizontally (using overlfow: auto) since the width of the parent container is less than the sum of the width of its parent containers children, but instead, I interpret that it overflows vertically and that is why a bar appears to scroll vertically. My question is, how can I get the horizontal bar and its respective offset on the x-axis? (And not in the y).

This is part of my html code:

<div style = "width: 700px; height: 50px; overflow: auto;">
        <div style = "width: 100%; height: 100%; background-color: #b01e1e;">
            <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example1</p></b></div>
            <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example2</p></b></div>
            <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example3</p></b></div>
            <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example4</p></b></div>
            <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example5</p></b></div>
            <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example6</p></b></div>
            <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example7</p></b></div>
            <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example8</p></b></div>
            <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example9</p></b></div>
            <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example10</p></b></div>
            <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example11</p></b></div>
            <div style= "float: left; width: 11.11%; height: 100%; justify-content: center; align-items: center; display: flex; vertical-align: middle;"><b><p>Example12</p></b></div>
        </div>
    </div>

CodePudding user response：

Try <div style:"Overflow:Scroll,display:block;"> This worked for me.

CodePudding user response：

try this.This was working for me

<div style = "width: 700px; height: 50px; overflowX: auto;">

CodePudding user response：

Answer is: Don't use float.

Use a CSS grid. Simplifies everything by ALOT.

.grid {
  display: grid;
  grid-template-columns: repeat(12, 11.11%);
  overflow-x: auto;
  place-items: center;
  height: 50px;
  width: 700px;
}

<div >
  <div>Example</div>
  <div>Example</div>
  <div>Example</div>
  <div>Example</div>
  <div>Example</div>
  <div>Example</div>
  <div>Example</div>
  <div>Example</div>
  <div>Example</div>
  <div>Example</div>
  <div>Example</div>
  <div>Example</div>
</div>

CodePudding user response：

Erase the floats (these will always break if there isn't enough space) and replace display: flex;with display: inline-flex; to allow them to be inline. Then apply white-space: nowrap; to the parent of those inline-flex elements to avoid the breaking:

<div style="width: 700px; height: 50px; overflow: auto;">
  <div style="width: 100%; height: 100%; background-color: #b01e1e; white-space: nowrap;">
    <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example1</p></b></div>
    <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example2</p></b></div>
    <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example3</p></b></div>
    <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example4</p></b></div>
    <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example5</p></b></div>
    <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example6</p></b></div>
    <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example7</p></b></div>
    <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example8</p></b></div>
    <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example9</p></b></div>
    <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example10</p></b></div>
    <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example11</p></b></div>
    <div style="width: 11.11%; height: 100%; justify-content: center; align-items: center; display: inline-flex; vertical-align: middle;"><b><p>Example12</p></b></div>
  </div>
</div>

And by the way: Using external CSS makes things a lot easier to handle and more compact. Here's the same code as above reduced that way:

.a {
  width: 700px;
  height: 50px;
  overflow: auto;
}

.b {
  width: 100%;
  height: 100%;
  background-color: #b01e1e;
  white-space: nowrap;
}

.b > div {
  width: 11.11%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  vertical-align: middle;
}

<div >
  <div >
    <div><b><p>Example1</p></b></div>
    <div><b><p>Example2</p></b></div>
    <div><b><p>Example3</p></b></div>
    <div><b><p>Example4</p></b></div>
    <div><b><p>Example5</p></b></div>
    <div><b><p>Example6</p></b></div>
    <div><b><p>Example7</p></b></div>
    <div><b><p>Example8</p></b></div>
    <div><b><p>Example9</p></b></div>
    <div><b><p>Example10</p></b></div>
    <div><b><p>Example11</p></b></div>
    <div><b><p>Example12</p></b></div>
  </div>
</div>