Please help auto wrap and flex-start?

HTML & CSS
1

Hi all,
This is my example code, there are 4 titlexxx, and 4 ul following title. As you see, the 3rd title plus ul is too long, so there’s a bug: the ul failed to start right after title, it starts from next line, instead.

Second bug: width:100% or width:auto did not work. But I want title plus ul auto wrap to next line.

Third bug: when in cellphone, every ul failed to start right after title, instead they started next line. Also, width:100% did not work.

Here’s my code:

<div class="jumbotron">
  <a href="#" class="stock-link" data-symbol="BTC" target="_self">BTC</a>
  <div class="header-list-container">
    <h2 class="inline-list">title654 </h2>
    <ul>
      <!-- Iterate over the list passed from Flask -->
      <li>
        <a href="#" class="stock-link" data-symbol="MASK" target="_self">MASK</a>
      </li>
    </ul>
  </div>
  <div class="header-list-container">
    <h2 class="inline-list">title0 </h2>
    <ul>
      <!-- Iterate over the list passed from Flask -->
      <li>
        <a href="#" class="stock-link" data-symbol="AI16Z" target="_self">AI16Z</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="FARTCOIN" target="_self">FARTCOIN</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="PENGU" target="_self">PENGU</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="VANA" target="_self">VANA</a>
      </li>
    </ul>
  </div>
  <div class="header-list-container">
    <h2 class="inline-list">title798435844113145431641164654 </h2>
    <ul>
      <!-- Iterate over the list passed from Flask -->
      <li>
        <a href="#" class="stock-link" data-symbol="CTC" target="_self">CTC</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="PNUT" target="_self">PNUT</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="VANA" target="_self">VANA</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="NEIRO" target="_self">NEIRO</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="BADGER" target="_self">BADGER</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="OM" target="_self">OM</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="LOOKS" target="_self">LOOKS</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="MOVE" target="_self">MOVE</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="XTZ" target="_self">XTZ</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="MOODENG" target="_self">MOODENG</a>
      </li>

      <!-- Iterate over the list passed from Flask -->
      <li>
        <a href="#" class="stock-link" data-symbol="CTC" target="_self">CTC</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="PNUT" target="_self">PNUT</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="VANA" target="_self">VANA</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="NEIRO" target="_self">NEIRO</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="BADGER" target="_self">BADGER</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="OM" target="_self">OM</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="LOOKS" target="_self">LOOKS</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="MOVE" target="_self">MOVE</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="XTZ" target="_self">XTZ</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="MOODENG" target="_self">MOODENG</a>
      </li>
      <!-- Iterate over the list passed from Flask -->
      <li>
        <a href="#" class="stock-link" data-symbol="CTC" target="_self">CTC</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="PNUT" target="_self">PNUT</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="VANA" target="_self">VANA</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="NEIRO" target="_self">NEIRO</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="BADGER" target="_self">BADGER</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="OM" target="_self">OM</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="LOOKS" target="_self">LOOKS</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="MOVE" target="_self">MOVE</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="XTZ" target="_self">XTZ</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="MOODENG" target="_self">MOODENG</a>
      </li>
    </ul>
  </div>
  <div class="header-list-container">
    <h2 class="inline-list">title6465454 </h2>
    <ul>
      <!-- Iterate over the list passed from Flask -->
      <li>
        <a href="#" class="stock-link" data-symbol="ARKM" target="_self">ARKM</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="ID" target="_self">ID</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="SUNDOG" target="_self">SUNDOG</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="GODS" target="_self">GODS</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="BONE" target="_self">BONE</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="TAO" target="_self">TAO</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="SLP" target="_self">SLP</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="SHIB" target="_self">SHIB</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="AR" target="_self">AR</a>
      </li>
      <li>
        <a href="#" class="stock-link" data-symbol="KSM" target="_self">KSM</a>
      </li>
    </ul>
  </div>
  <div id="tf-links">
    <h2>Time:</h2>
    <a href="#" class="tf-link" data-tf="5m" target="_self">5m</a>
    <a href="#" class="tf-link" data-tf="15m" target="_self">15m</a>
    <a href="#" class="tf-link" data-tf="1H" target="_self">1H</a>
    <a href="#" class="tf-link" data-tf="4H" target="_self">4H</a>
    <a href="#" class="tf-link" data-tf="1D" target="_self">1D</a>
  </div>
  <div id="container" class="chart" style="height: 400px; min-width: 310px; margin-top: 20px;"></div>
</div>

h2 {
  margin: 0;
  margin-right: 10px;
  font-size: 20px;
  display: flex;
  flex-wrap: wrap;
}
.header-list-container {
  display: flex;
  width:100%;
  flex-wrap: wrap;
  align-items: center;
}

.header-list-container ul {
  display: flex;
  list-style-type: none !important;
}

li {
  margin-right: 10px;
}

@media (max-width: 600px) {
  .header-list-container {
    //flex-direction: column;
    width: auto;
    align-items: flex-start;
  }

  .header-list-container h2 {
    margin-bottom: 5px;
  }

  .header-list-container ul {
    width: 100%;
  }
}

I also put it in codepen: https://codepen.io/anderson234/pen/QwLgNvX

Could anybody please enlighten me?

2

Welcome to this forum.

Try replacing all your CSS by this:

h2 {
  display: inline;
}
ul {
  display: inline;
  padding-left: 0;
}
li {
  display: inline;
}

CSS comments are formatted like this, not like JavaScript comments::
https://www.w3schools.com/css/css_comments.asp

3 Likes
3

WOW !!!. That is magic, and beautiful. Learned a lot from this.

CSS comments are formatted like this, not like JavaScript comments::https://www.w3schools.com/css/css_comments.asp

Thanks.

Much appreciated! I’ve struggled for days.

2 Likes