Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

Why the table doesn't become overflow as soon as it reaches its minimum size? It does in a certain screen size

byMR
December 5, 2023

I gave the container of the table overflow-x scroll. It works but not in time. it should be create scroll in somewhere 1200px screen size but creates in 1040px. Because of this there appears horizontal scroll for the whole page. How resolve this issue?
thank you.

I gave the container of the table overflow-x scroll. It works but not in time. it should be create scroll in somewhere 1200px screen size but creates in 1040px. Because of this there appears horizontal scroll for the whole page. How resolve this issue?

here is my code.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel 

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

body {
  background-color: black;
}

.main {
  max-width: 1920px;
}
.home {
  height: 972px;
}
.homeContainer {
  margin-left: 260px;
  display: flex;
  @media (max-width: 1835px) {
    margin-left: 160px;
  }
  @media (max-width: 1640px) {
    margin-left: 0;
  }
  @media (max-width: 690px) {
    flex-direction: column;
  }
}

.company {
  min-width: 300px;
  background-color: blue;
  height: 972px;
  overflow: hidden;
  @media (max-width: 1640px) {
    min-width: 200px;
  }
  @media (max-width: 690px) {
    background-color: black;
    height: fit-content;
  }
}
.companyContainer {
  margin: 0 25px;
  @media (max-width: 1640px) {
    margin: 0 20px;
  }
  @media (max-width: 690px) {
    margin: 0 10px;
  }
  display: flex;
  flex-direction: column;
  align-items: center;
}
.companyTitle {
  margin-top: 71px;
  font-family: sans-serif;
  color: #fff;
  font-size: 40px;
  @media (max-width: 1640px) {
    font-size: 28px;
  }
  font-weight: 600;
  text-transform: uppercase;
}

.passengerTraffic {
  width: 100%;
}

.infoTable {
  overflow: hidden;
  color: white;
  margin-top: 20px;
}
.container {
  margin-right: 260px;
  @media (max-width: 1835px) {
    margin-right: 160px;
  }
  @media (max-width: 1640px) {
    margin-right: 0;
    margin-left: 20px;
  }
  @media (max-width: 745px) {
    margin-left: 0;
  }

  overflow-x: scroll;
  &::-webkit-scrollbar {
    height: 5px;
  }

  &::-webkit-scrollbar-track {
    margin-block: 50px;
    border-radius: 10px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.121) 0%,
      rgba(255, 255, 255, 0.121) 12%
    );
  }

  &::-webkit-scrollbar-thumb {
    background-color: pink;
    border-radius: 10px;
  }
}
.table {
  border-collapse: collapse;
  width: 100%;
}
.firstColumnPeriod {
  min-width: 76px;
  max-width: 76px;
  padding: 15px 6px 18px 6px;
  color: white;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid gray;
  border-left: none;
  border-bottom: none;
  padding: 0;
}
.columnPeriod {
  width: 41px;
  min-width: 41px;
  min-height: 45px;
  text-align: center;
  color: green;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid gray;
  border-bottom: none;
  @media (max-width: 1640px) {
    width: unset;
  }
  font-size: 9px;
  color: white;
  padding: 5px 0 9px 0px;
}
.firstColumn {
  min-width: 76px;
  max-width: 76px;
  padding: 15px 6px 18px 6px;
  color: white;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid gray;
  border-left: none;
  border-bottom: none;
}
.column {
  width: 41px;
  min-width: 41px;
  min-height: 45px;
  text-align: center;
  color: green;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid gray;
  border-bottom: none;
  @media (max-width: 1640px) {
    width: unset;
  }
}
<main class="main">
      <section class="home">
        <div class="homeContainer">
          <section class="company">
            <div class="companyContainer">
              <h1 class="companyTitle">Company</h1>
            </div>
          </section>
          <section class="passengerTraffic">
            <section class="infoTable">
              <div class="container">
                <table class="table">
                  <tbody>
                    <tr>
                      <td class="columnPeriod"></td>
                      <td class="columnPeriod">0 - 1 ч.</td>
                      <td class="columnPeriod">1 - 2 ч.</td>
                      <td class="columnPeriod">2 - 3 ч.</td>
                      <td class="columnPeriod">3 - 4 ч.</td>
                      <td class="columnPeriod">5 - 6 ч.</td>
                      <td class="columnPeriod">6 - 7 ч.</td>
                      <td class="columnPeriod">7 - 8 ч.</td>
                      <td class="columnPeriod">8 - 9 ч.</td>
                      <td class="columnPeriod">9 - 10 ч.</td>
                      <td class="columnPeriod">10 - 11 ч.</td>
                      <td class="columnPeriod">11 - 12 ч.</td>
                      <td class="columnPeriod">12 - 13 ч.</td>
                      <td class="columnPeriod">13 - 14 ч.</td>
                      <td class="columnPeriod">14 - 15 ч.</td>
                      <td class="columnPeriod">15 - 16 ч.</td>
                      <td class="columnPeriod">16 - 17 ч.</td>
                      <td class="columnPeriod">17 - 18 ч.</td>
                      <td class="columnPeriod">18 - 19 ч.</td>
                      <td class="columnPeriod">19 - 20 ч.</td>
                      <td class="columnPeriod">20 - 21 ч.</td>
                      <td class="columnPeriod">21 - 22 ч.</td>
                      <td class="columnPeriod">22 - 23 ч.</td>
                      <td class="columnPeriod">23 - 24 ч.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>
          </section>
        </div>
      </section>
    </main>

>Solution :

By default, flex items cannot be shrunk beyond their content size; hence, .passengerTraffic is never shrunk enough by flex to trigger overflow. Add min-width: 0 on it.

.passengerTraffic {
    min-width: 0; /*Add this*/
    width: 100%;
}

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

body {
  background-color: black;
}

.main {
  max-width: 1920px;
}
.home {
  height: 972px;
}
.homeContainer {
  margin-left: 260px;
  display: flex;
  @media (max-width: 1835px) {
    margin-left: 160px;
  }
  @media (max-width: 1640px) {
    margin-left: 0;
  }
  @media (max-width: 690px) {
    flex-direction: column;
  }
}

.company {
  min-width: 300px;
  background-color: blue;
  height: 972px;
  overflow: hidden;
  @media (max-width: 1640px) {
    min-width: 200px;
  }
  @media (max-width: 690px) {
    background-color: black;
    height: fit-content;
  }
}
.companyContainer {
  margin: 0 25px;
  @media (max-width: 1640px) {
    margin: 0 20px;
  }
  @media (max-width: 690px) {
    margin: 0 10px;
  }
  display: flex;
  flex-direction: column;
  align-items: center;
}
.companyTitle {
  margin-top: 71px;
  font-family: sans-serif;
  color: #fff;
  font-size: 40px;
  @media (max-width: 1640px) {
    font-size: 28px;
  }
  font-weight: 600;
  text-transform: uppercase;
}

.passengerTraffic {
  min-width: 0; /*Add this*/
  border: 2px solid red; /*I've added a border for better visualization*/
  width: 100%;
}

.infoTable {
  overflow: hidden;
  color: white;
  margin-top: 20px;
}
.container {
  margin-right: 260px;
  @media (max-width: 1835px) {
    margin-right: 160px;
  }
  @media (max-width: 1640px) {
    margin-right: 0;
    margin-left: 20px;
  }
  @media (max-width: 745px) {
    margin-left: 0;
  }

  overflow-x: scroll;
  &::-webkit-scrollbar {
    height: 5px;
  }

  &::-webkit-scrollbar-track {
    margin-block: 50px;
    border-radius: 10px;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.121) 0%,
      rgba(255, 255, 255, 0.121) 12%
    );
  }

  &::-webkit-scrollbar-thumb {
    background-color: pink;
    border-radius: 10px;
  }
}
.table {
  border-collapse: collapse;
  width: 100%;
}
.firstColumnPeriod {
  min-width: 76px;
  max-width: 76px;
  padding: 15px 6px 18px 6px;
  color: white;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid gray;
  border-left: none;
  border-bottom: none;
  padding: 0;
}
.columnPeriod {
  width: 41px;
  min-width: 41px;
  min-height: 45px;
  text-align: center;
  color: green;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid gray;
  border-bottom: none;
  @media (max-width: 1640px) {
    width: unset;
  }
  font-size: 9px;
  color: white;
  padding: 5px 0 9px 0px;
}
.firstColumn {
  min-width: 76px;
  max-width: 76px;
  padding: 15px 6px 18px 6px;
  color: white;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid gray;
  border-left: none;
  border-bottom: none;
}
.column {
  width: 41px;
  min-width: 41px;
  min-height: 45px;
  text-align: center;
  color: green;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid gray;
  border-bottom: none;
  @media (max-width: 1640px) {
    width: unset;
  }
}
<main class="main">
      <section class="home">
        <div class="homeContainer">
          <section class="company">
            <div class="companyContainer">
              <h1 class="companyTitle">Company</h1>
            </div>
          </section>
          <section class="passengerTraffic">
            <section class="infoTable">
              <div class="container">
                <table class="table">
                  <tbody>
                    <tr>
                      <td class="columnPeriod"></td>
                      <td class="columnPeriod">0 - 1 ч.</td>
                      <td class="columnPeriod">1 - 2 ч.</td>
                      <td class="columnPeriod">2 - 3 ч.</td>
                      <td class="columnPeriod">3 - 4 ч.</td>
                      <td class="columnPeriod">5 - 6 ч.</td>
                      <td class="columnPeriod">6 - 7 ч.</td>
                      <td class="columnPeriod">7 - 8 ч.</td>
                      <td class="columnPeriod">8 - 9 ч.</td>
                      <td class="columnPeriod">9 - 10 ч.</td>
                      <td class="columnPeriod">10 - 11 ч.</td>
                      <td class="columnPeriod">11 - 12 ч.</td>
                      <td class="columnPeriod">12 - 13 ч.</td>
                      <td class="columnPeriod">13 - 14 ч.</td>
                      <td class="columnPeriod">14 - 15 ч.</td>
                      <td class="columnPeriod">15 - 16 ч.</td>
                      <td class="columnPeriod">16 - 17 ч.</td>
                      <td class="columnPeriod">17 - 18 ч.</td>
                      <td class="columnPeriod">18 - 19 ч.</td>
                      <td class="columnPeriod">19 - 20 ч.</td>
                      <td class="columnPeriod">20 - 21 ч.</td>
                      <td class="columnPeriod">21 - 22 ч.</td>
                      <td class="columnPeriod">22 - 23 ч.</td>
                      <td class="columnPeriod">23 - 24 ч.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>
          </section>
        </div>
      </section>
    </main>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading