Why are my tabs moving to the vertical side on big, bigger and wide monitors?

Issue

Before, I have acknowledged the existing question similar to the mine: Pure CSS accordion not working within CSS tabs, which works perfectly on any monitor of any size, but the difference between us is that they used a and I do not use this element. In their code, the if you set border property to .w3c, the border ends up external, not central or internal.

The pure CSS tabs work perfectly on the small and medium monitors, but do not work on the big, bigger and wide monitors. On the big, bigger and wide monitors, the tabs end up being moved to the vertical side.

On the element .tabs-ids, I changed the CSS grid display and flex-wrap property values and it always was same, but only on the big, bigger and wide monitors. I also tried to test other elements – .tabs-label and .tabs-panel, but it didn't give effect.

You can test the snippet. Remember to set the responsive design to 2400px:

:root {
  --ids_color_action_neutral_base: #3B3B3B;
  --ids_color_bg_base: #FFFFFF;
  --ids_color_bg_variant_01: #F1F2F4;
  --ids_color_border_soft: #CFD1D3;
  --ids_size_cornerRadius_button: 0.75rem;
  --ids_size_cornerRadius_tags_01: 0.25rem;
  --ids_size_border_small: 0.0625rem;
  --ids_size_general_8x: 0.5rem;
  --ids_size_general_20x: 1.25rem;
}

.ids-markdown {
  font-family: sans-serif;
  margin: 10px;
  width: 100%;
}

.ids-markdown .tabs-ids {
  display: flex;
  flex-wrap: wrap;
  background: none;
  border: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  border-bottom-left-radius: var(--ids_size_cornerRadius_tags_01);
  border-bottom-right-radius: var(--ids_size_cornerRadius_tags_01);
  border-top-left-radius: var(--ids_size_cornerRadius_button);
  border-top-right-radius: var(--ids_size_cornerRadius_button);
  margin: 20px;
}

.ids-markdown .tabs-ids .tabs-input {
  position: absolute;
  opacity: 0;
}

.ids-markdown .tabs-ids .tabs-label {
  border-right: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  color: var(--ids_color_action_neutral_base);
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: background 0.1s, color 0.1s;
  /* width: 100%; */
  width: auto;
  align-items: center;
  display: flex;
  filter: saturate(0);
  justify-content: center;
  padding: var(--ids_size_general_8x) var(--ids_size_general_20x);
}

.ids-markdown .tabs-ids .tabs-label img {
  height: 1.625rem;
}

.ids-markdown .tabs-ids .tabs-label:hover,
.ids-markdown .tabs-ids .tabs-label:active {
  filter: saturate(1);
}

.ids-markdown .tabs-ids .tabs-input:focus+.tabs-label {
  z-index: 1;
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label:nth-child(2) {
  border-top-left-radius: var(--ids_size_cornerRadius_button);
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label {
  background-color: var(--ids_color_bg_variant_01);
  color: var(--ids_color_action_neutral_base);
  filter: saturate(1);
}

.ids-markdown .tabs-ids .tabs-panel {
  background-color: var(--ids_color_bg_variant_01);
  border-top: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  display: none;
  order: 99;
}

.ids-markdown .tabs-ids .tabs-panel section {
  background: var(--ids_color_bg_base);
  padding: 20px 30px 30px;
}

.ids-markdown .tabs-ids .tabs-panel .pre {
  border: unset;
  border-radius: unset;
  border-bottom-left-radius: var(--ids_size_cornerRadius_tags_01);
  border-bottom-right-radius: var(--ids_size_cornerRadius_tags_01);
  margin: 0px;
  width: 100%;
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label+.tabs-panel {
  display: block;
}

And the small HTML code:

<div class="ids-markdown">
  <div class="tabs-ids">
    <input class="tabs-input" id="tab-ids-1" name="tabs-ids" type="radio" checked>
    <label class="tabs-label" for="tab-ids-1"><img src="https://cdn-icons-png.flaticon.com/128/546/546049.png" alt="Linux"></label>
    <div class="tabs-panel">
      <section>
        <h1>Arlina Design</h1>
        <p>Arlina Design (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae</p>
        <p>The fruit of the Citrus × sinensis is considered a sweet orange, whereas the fruit of the Citrus × aurantium is considered a bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise through mutations.</p>
      </section>
    </div>
    <input class="tabs-input" id="tab-ids-2" name="tabs-ids" type="radio">
    <label class="tabs-label" for="tab-ids-2"><img src="https://cdn-icons-png.flaticon.com/128/1532/1532546.png" alt="macOS"></label>
    <div class="tabs-panel">
      <section>
        <h1>Idntheme</h1>
        <p>Idntheme (Citrus tangerina) is an orange-colored citrus fruit that is closely related to, or possibly a type of, mandarin orange (Citrus reticulata).</p>
        <p>The name was first used for fruit coming from Tangier, Morocco, described as a mandarin variety. Under the Tanaka classification system, Citrus tangerina is considered a separate species.</p>
      </section>
    </div>
    <input class="tabs-input" id="tab-ids-3" name="tabs-ids" type="radio">
    <label class="tabs-label" for="tab-ids-3"><img src="https://cdn-icons-png.flaticon.com/128/1532/1532543.png" alt="Windows"></label>
    <div class="tabs-panel">
      <section>
        <h1>Tekno Match</h1>
        <p>Tekno Match (Citrus ×clementina) is a hybrid between a mandarin orange and a sweet orange, so named in 1902. The exterior is a deep orange colour with a smooth, glossy appearance. Clementines can be separated into 7 to 14 segments. Similarly to
          tangerines, they tend to be easy to peel.</p>
      </section>
    </div>
  </div>
</div>

Solution

You have a flex container .tabs-ids holding the elements being both the tab buttons and the actual content to be shown when such buttons get clicked.

The reason why on wider screen the elements are kept on the same line instead of wrapping on the next line (what you called my tabs moving to the vertical side on big screen) is because your flex layout arranges those elements according to their size based on their content.

What you need to avoid that behaviour is to style differently the element with the actual content to be shown.

If you simply add a new class to the elements containing the actual content you can style those to make sure they take 100% width of their container and they will surely wrap on the next line.

This was the only modification I did to the style section of your code:

.tabs-panel.actual-content {
  width: 100%;
}

Plus I added the actual-content class to the elements containing the text content.

:root {
  --ids_color_action_neutral_base: #3B3B3B;
  --ids_color_bg_base: #FFFFFF;
  --ids_color_bg_variant_01: #F1F2F4;
  --ids_color_border_soft: #CFD1D3;
  --ids_size_cornerRadius_button: 0.75rem;
  --ids_size_cornerRadius_tags_01: 0.25rem;
  --ids_size_border_small: 0.0625rem;
  --ids_size_general_8x: 0.5rem;
  --ids_size_general_20x: 1.25rem;
}

.ids-markdown {
  font-family: sans-serif;
  margin: 10px;
  width: 100%;
}

.ids-markdown .tabs-ids {
  display: flex;
  flex-wrap: wrap;
  background: none;
  border: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  border-bottom-left-radius: var(--ids_size_cornerRadius_tags_01);
  border-bottom-right-radius: var(--ids_size_cornerRadius_tags_01);
  border-top-left-radius: var(--ids_size_cornerRadius_button);
  border-top-right-radius: var(--ids_size_cornerRadius_button);
  margin: 20px;
}

.ids-markdown .tabs-ids .tabs-input {
  position: absolute;
  opacity: 0;
}

.ids-markdown .tabs-ids .tabs-label {
  border-right: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  color: var(--ids_color_action_neutral_base);
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: background 0.1s, color 0.1s;
  /* width: 100%; */
  width: auto;
  align-items: center;
  display: flex;
  filter: saturate(0);
  justify-content: center;
  padding: var(--ids_size_general_8x) var(--ids_size_general_20x);
}

.ids-markdown .tabs-ids .tabs-label img {
  height: 1.625rem;
}

.ids-markdown .tabs-ids .tabs-label:hover,
.ids-markdown .tabs-ids .tabs-label:active {
  filter: saturate(1);
}

.ids-markdown .tabs-ids .tabs-input:focus+.tabs-label {
  z-index: 1;
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label:nth-child(2) {
  border-top-left-radius: var(--ids_size_cornerRadius_button);
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label {
  background-color: var(--ids_color_bg_variant_01);
  color: var(--ids_color_action_neutral_base);
  filter: saturate(1);
}

.ids-markdown .tabs-ids .tabs-panel {
  background-color: var(--ids_color_bg_variant_01);
  border-top: var(--ids_size_border_small) solid var(--ids_color_border_soft);
  display: none;
  order: 99;
}

.ids-markdown .tabs-ids .tabs-panel section {
  background: var(--ids_color_bg_base);
  padding: 20px 30px 30px;
}

.ids-markdown .tabs-ids .tabs-panel .pre {
  border: unset;
  border-radius: unset;
  border-bottom-left-radius: var(--ids_size_cornerRadius_tags_01);
  border-bottom-right-radius: var(--ids_size_cornerRadius_tags_01);
  margin: 0px;
  width: 100%;
}

.ids-markdown .tabs-ids .tabs-input:checked+.tabs-label+.tabs-panel {
  display: block;
}

.tabs-panel.actual-content {
  width: 100%;
}

<div class="ids-markdown">
  <div class="tabs-ids">
    <input class="tabs-input" id="tab-ids-1" name="tabs-ids" type="radio" checked>
    <label class="tabs-label" for="tab-ids-1"><img src="https://cdn-icons-png.flaticon.com/128/546/546049.png" alt="Linux"></label>
    <div class="tabs-panel actual-content">
      <section>
        <h1>Arlina Design</h1>
        <p>Arlina Design (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae</p>
        <p>The fruit of the Citrus × sinensis is considered a sweet orange, whereas the fruit of the Citrus × aurantium is considered a bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise
          through mutations.</p>
      </section>
    </div>
    <input class="tabs-input" id="tab-ids-2" name="tabs-ids" type="radio">
    <label class="tabs-label" for="tab-ids-2"><img src="https://cdn-icons-png.flaticon.com/128/1532/1532546.png" alt="macOS"></label>
    <div class="tabs-panel actual-content">
      <section>
        <h1>Idntheme</h1>
        <p>Idntheme (Citrus tangerina) is an orange-colored citrus fruit that is closely related to, or possibly a type of, mandarin orange (Citrus reticulata).</p>
        <p>The name was first used for fruit coming from Tangier, Morocco, described as a mandarin variety. Under the Tanaka classification system, Citrus tangerina is considered a separate species.</p>
      </section>
    </div>
    <input class="tabs-input" id="tab-ids-3" name="tabs-ids" type="radio">
    <label class="tabs-label" for="tab-ids-3"><img src="https://cdn-icons-png.flaticon.com/128/1532/1532543.png" alt="Windows"></label>
    <div class="tabs-panel actual-content">
      <section>
        <h1>Tekno Match</h1>
        <p>Tekno Match (Citrus ×clementina) is a hybrid between a mandarin orange and a sweet orange, so named in 1902. The exterior is a deep orange colour with a smooth, glossy appearance. Clementines can be separated into 7 to 14 segments. Similarly to
          tangerines, they tend to be easy to peel.</p>
      </section>
    </div>
  </div>
</div>

Answered By - Diego D