I am using CSS flex and I want to remove the elements (hide them or remove them) when the elements w-CodePudding

I have a html code with a lots of span elements and I am using CSS flex container to hold them, now I want them to be display:hidden (hide the elements) instead of wrapping in next row dynamically as the size of screen reduces.

Can anyone suggest me the solution.

Below is the html and css code I am using

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: #0c192c;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.bubbles {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.bubbles span {
  position: relative;
  height: 1rem;
  width: 1rem;
  margin: 0 4px;
  border-radius: 50%;
  background: #4fc3dc;
  box-shadow: 0 0 0 10px #4fc3dc44;
}

<div >
  <div >
    <span style="--i:11"></span>
    <span style="--i:12"></span>
    <span style="--i:23"></span>
    <span style="--i:18"></span>
    <span style="--i:18"></span>
    <span style="--i:21"></span>
    <span style="--i:15"></span>
    <span style="--i:13"></span>
    <span style="--i:24"></span>
    <span style="--i:10"></span>
    <span style="--i:14"></span>
    <span style="--i:26"></span>
    <span style="--i:17"></span>
    <span style="--i:22"></span>
    <span style="--i:25"></span>
    <span style="--i:24"></span>
    <span style="--i:10"></span>
    <span style="--i:14"></span>
    <span style="--i:26"></span>
    <span style="--i:17"></span>
    <span style="--i:22"></span>
    <span style="--i:25"></span>
    <span style="--i:24"></span>
    <span style="--i:14"></span>
    <span style="--i:26"></span>
    <span style="--i:17"></span>
    <span style="--i:22"></span>
    <span style="--i:25"></span>
    <span style="--i:24"></span>
  </div>
</div>

CodePudding user response：

I can suggest these :

You can change your flex-wrap: nowrap, so your content is not wrapping anymore
You can set max-height and overflow-y together to prevent showing wrapped lines anymore

.bubbles {
  max-height:1rem;
  overflow-y:hidden;
}

CodePudding user response：

Maybe you could change the height and width of the span elements to min-height and min-width

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: #0c192c;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.bubbles {
  display: flex;
}

.bubbles span {
  min-height: 1rem;
  min-width: 1rem;
  margin: 0 4px;
  border-radius: 50%;
  background: #4fc3dc;
  box-shadow: 0 0 0 10px #4fc3dc44;
}

<div >
  <div >
    <span style="--i:11"></span>
    <span style="--i:12"></span>
    <span style="--i:23"></span>
    <span style="--i:18"></span>
    <span style="--i:18"></span>
    <span style="--i:21"></span>
    <span style="--i:15"></span>
    <span style="--i:13"></span>
    <span style="--i:24"></span>
    <span style="--i:10"></span>
    <span style="--i:14"></span>
    <span style="--i:26"></span>
    <span style="--i:17"></span>
    <span style="--i:22"></span>
    <span style="--i:25"></span>
    <span style="--i:24"></span>
    <span style="--i:10"></span>
    <span style="--i:14"></span>
    <span style="--i:26"></span>
    <span style="--i:17"></span>
    <span style="--i:22"></span>
    <span style="--i:25"></span>
    <span style="--i:24"></span>
    <span style="--i:14"></span>
    <span style="--i:26"></span>
    <span style="--i:17"></span>
    <span style="--i:22"></span>
    <span style="--i:25"></span>
    <span style="--i:24"></span>
  </div>
</div>