1

I have a horizontal scroll menu like this:

.tags-forest {
  border: 4px solid red;
  display: flex;
  flex-wrap: nowrap;
}
  .tags-leader {
    display: flex;
    flex: 0 0 130px;
    height: 40px;
  }

  .tags-line {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    height: 60px;
  }

  .tags-item {
    display: flex;
    flex: 0 0 auto;

    height: 30px;
    margin: 0 10px;
    background: #EEE;
    padding: 5px;
  }
<div class="tags-forest">
  <div class="tags-leader">Tags</div>
  <div class="tags-line">
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
    <span class="tags-item">I am tag</span>
  </div>
</div>

This menu works well for now.

Then I created a left-right flexbox layout as

.layout {
  display: flex;
}
nav {
  width: 200px;
  flex-shrink:0;
  border: 4px solid green;
}
main {
  flex-grow:1;
}
.content {
  height: 50px;
  border: 4px solid blue;
}
<div class="layout">
  <nav>120px nav</nav>
  <main>
    <div class="content"> content </div>
  </main>
</div>

This layout has a fixed width nav and a dynamic width content.

When I try to put this menu into this layout, the layout was crashed, right content was expended out of screen as below:

.layout {
  display: flex;
}
nav {
  width: 200px;
  flex-shrink:0;
  border: 4px solid green;
}

main {
  flex-grow:1;
}

.content {
  height: 50px;
  border: 4px solid blue;
}

.tags-forest {
  border: 4px solid red;
  display: flex;
  flex-wrap: nowrap;
}
  .tags-leader {
    display: flex;
    flex: 0 0 130px;
    height: 40px;
  }

  .tags-line {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    height: 60px;
  }

  .tags-item {
    display: flex;
    flex: 0 0 auto;

    height: 30px;
    margin: 0 10px;
    background: #EEE;
    padding: 5px;
  }
<div class="layout">
  <nav>120px nav</nav>
  <main>

    <div class="tags-forest">
      <div class="tags-leader">Tags</div>
      <div class="tags-line">
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
        <span class="tags-item">I am tag</span>
      </div>
    </div>
         <div class="content"> content </div>
  </main>
</div>

I tried some ways to change flexbox params but not work, is there anyone could help me to make the layout correct

AlloVince
  • 1,655
  • 11
  • 18
  • 1
    add `min-width: 0` to `main` – kukkuz Apr 09 '19 at 09:55
  • see question marked for explanation... see [`here`](https://stackoverflow.com/questions/52277368/flexbox-affects-overflow-wrap-behavior/52278099#52278099) and [`here`](https://stackoverflow.com/questions/55303538/flexbox-resize-and-scrollable-overflow/55303600#55303600) for some examples... – kukkuz Apr 09 '19 at 10:04

0 Answers0