JSFiddle - React, Tailwind, and code Playground

by igor_9000

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<h1>
Actual Result
</h1>
<div class="container">
  <div class="row">
    <div class="col-auto sidebar">
      sidebar
    </div>
    <div class="col main">
      <div class="row">
        <div class="col">
          navigation
        </div>
      </div>
      
      <div id="component-container" class="row">
        <div class="col">
          <div class="row flex-row flex-nowrap" id="card-tabs">
            <div class="col">
              <div class="some-card">
                Card A
              </div>
            </div>
            <div class="col">
              <div class="some-card">
                Card B
              </div>
            </div>
            <div class="col">
              <div class="some-card">
                Card C
              </div>
            </div>
            <div class="col">
              <div class="some-card">
                Card D
              </div>
            </div>
            <div class="col">
              <div class="some-card">
                Card E
              </div>
            </div>
            <div class="col">
              <div class="some-card">
                Card F
              </div>
            </div>
          </div>
        </div>


      </div>
      <div class="row">
        <div class="col-12">
          footer
        </div>
      </div>
      
      
    </div>    
  </div>
</div>


<h1>
Desired Result
</h1>
<div class="container desired">
  <div class="row">
    <div class="col-auto sidebar">
      sidebar
    </div>
    <div class="col main">
      <div class="row">
        <div class="col">
          navigation
        </div>
      </div>
      
      <div id="component-container" class="row">
        <div class="col">
          <div class="row flex-row flex-nowrap" id="card-tabs">
            <div class="col">
              <div class="some-card">
                Card A
             ...

CSS

.sidebar {
  width: 200px;
  border: 1px solid red;
}

.main {
  border: 1px solid blue;
}

.desired .main {
  /* this gives me what I want, but will cause my layout to break in other pages */
  overflow-x: hidden;
}



#card-tabs {
    overflow-y: visible;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0;
    width: 100%;
    clear: both;
}
#card-tabs .some-card {
  border: 1px solid #333;
  width: 150px;
  height: 50px;
}