Friday

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

Issue

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.

here is my code.

* {
  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>

Answered By - SyndRain

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Friday

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

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels