How to make CSS long column text widen grid instead of overflowing?-CodePudding

I'm currently refactoring one of my Firefox addons and I noticed an issue that arises with one of the translations: I've got a tab switch that is a CSS grid with 2 columns, both of which have a width of 50%. With shorter tab titles everything works as expected but longer titles overflow.

Instead, I want longer titles to just widen their respective columns. The tab-buttons shall be of the same width and the tab-button-container shall be of fit-content width. While it would be possible to just set an appropriate absolute value for the tab-button-container width, I don't want to unnecessarily waste any screen space.

Can you help me? Thank you!

html {
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  border: none;
  width: max-content;
  height: fit-content;
  font-size: 14px;
}

body {
  overflow: hidden;
  font-family: sans-serif;
  margin: 0px;
  height: fit-content;
  width: max-content;
  border: none;
}

main {
  padding-left: 20px;
  padding-right: 20px;
  width: max-content;
}

.tab-button-container {
  grid-template-columns: repeat(2, calc(50% - 2px));
  padding: 4px;
  column-gap: 4px;
  width: calc(100% - 4px);
  min-width: max-content;
  display: grid;
  position: relative;
  left: 50%;
  transform: translate(-50%,0);
  background-color: rgb(226, 226, 226);
  border-radius: 5px;
  cursor: default;
  margin-top: 20px;
  margin-bottom: 20px;
}

.tab-button {
  white-space: nowrap;
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}

.tab-button--active {
  background-color: #0a84ff;
  color: white;
}

.tab-button--inactive {
  background-color: transparent;
  color: #676767;
  transition: 0.3s;
}

.tab-button--inactive:hover {
  background-color: rgb(200, 200, 200);
  transition: 0.3s;
}

<html>
  <body>
    <main>
      <div >
        <span >
          <i ></i>
          <a >Salataan</a>
        </span>

        <span >
          <a >Salaus puretaan loremipsum</a>
        </span>
      </div>
    </main>
  </body>
</html>

CodePudding user response：

The oveflow issue is caused because of the limited width of: .tab-button-container { grid-template-columns: repeat(2, calc(50% - 2px)); }. You need to change the column width to fit the content:

html {
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  border: none;
  width: max-content;
  height: fit-content;
  font-size: 14px;
}

body {
  overflow: hidden;
  font-family: sans-serif;
  margin: 0px;
  height: fit-content;
  width: max-content;
  border: none;
}

main {
  padding-left: 20px;
  padding-right: 20px;
  width: max-content;
}

.tab-button-container {
  grid-template-columns: repeat(2, minmax(min-content, calc(50% - 2px)));
  padding: 4px;
  column-gap: 4px;
  width: calc(100% - 4px);
  min-width: max-content;
  display: grid;
  position: relative;
  left: 50%;
  transform: translate(-50%,0);
  background-color: rgb(226, 226, 226);
  border-radius: 5px;
  cursor: default;
  margin-top: 20px;
  margin-bottom: 20px;
}

.tab-button {
  white-space: nowrap;
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}

.tab-button--active {
  background-color: #0a84ff;
  color: white;
}

.tab-button--inactive {
  background-color: transparent;
  color: #676767;
  transition: 0.3s;
}

.tab-button--inactive:hover {
  background-color: rgb(200, 200, 200);
  transition: 0.3s;
}

<html>
  <body>
    <main>
      <div >
        <span >
          <i ></i>
          <a >Salataan</a>
        </span>

        <span >
          <a >Salaus puretaan loremipsum</a>
        </span>
      </div>
    </main>
  </body>
</html>

CodePudding user response：

This is the solution.

html {
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  border: none;
  width: max-content;
  height: fit-content;
  font-size: 14px;
}

body {
  overflow: hidden;
  font-family: sans-serif;
  margin: 0px;
  height: fit-content;
  width: max-content;
  border: none;
}

main {
  padding-left: 20px;
  padding-right: 20px;
  width: max-content;
}

.tab-button-container {
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  column-gap: 4px;
  width: calc(100% - 4px);
  min-width: max-content;
  display: grid;
  position: relative;
  left: 50%;
  transform: translate(-50%,0);
  background-color: rgb(226, 226, 226);
  border-radius: 5px;
  cursor: default;
  margin-top: 20px;
  margin-bottom: 20px;
}

.tab-button {
  white-space: nowrap;
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}

.tab-button--active {
  background-color: #0a84ff;
  color: white;
}

.tab-button--inactive {
  background-color: transparent;
  color: #676767;
  transition: 0.3s;
}

.tab-button--inactive:hover {
  background-color: rgb(200, 200, 200);
  transition: 0.3s;
}

<html>
  <body>
    <main>
      <div >
        <span >
          <i ></i>
          <a >Salataan</a>
        </span>

        <span >
          <a >Salaus puretaan loremipsum</a>
        </span>
      </div>
    </main>
  </body>
</html>