CODEWITHSUNDEEP
cssreactjsflexbox
bravosierra99
bravosierra99

Reputation: 1371

css flex-box contains space for an extra inner element

edit1: I did just notices that if I "device toolbar" to change the width I can reduce that extra space down... but only if my "screen" width goes to exactly the width of those 3 items.

I'm extremely new to css and relatively new to react but have been taking a course in...

I'm using a display: flex inside of a display: flex. I've read that if you make an element of a flex-box have width:100% it will move it to the next line. That works just perfectly for me. The thing I move to the next line is another display:flex container... It has 3 items in it. For some reason it's expanding the outer container to the width of 4 of those items. If I add an item and go to 4 items... it makes it the width of 4.

using developer tools I mouse over and it pretty clear shows this "dead space"... but I have no corresponding html element. I just have the divs for the items that exist.

here are the declarations for my inner flex container

display: flex;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
width: 100%;

here are the outer

width: 100%;
font-weight: "bold";
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
background-color: rgba(225, 0, 255, 0.178);
padding: 0.5rem;
margin: 1rem 0;

here's a picture of me mousing over the inner container with developer tools. Please let me know what else would help diagnose this issue... or where to read up to understand what is going on.

https://i.sstatic.net/kQ0ga.jpg

The goal is to have the inner container dictate the width of the outer container based on the number of items it has in it (no extra item spacing)

Upvotes: 2

Views: 882

Answers (1)

Anton
Anton

Reputation: 8538

For this you need to change the width in the flex container from 100% to fit-content. If width: 100% this means that the container expands on full visible width thus you can see empty space. Replacement to fit-content fix this.

enter image description here

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  text-align: center;
  padding: 0px;
  margin: 0px;
  background: grey;
  justify-content: stretch;
}

.container,
.container2 {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid wheat;
}

.container {
  width: 100%;
}

.container2 {
  width: fit-content;
  width: -moz-fit-content;
}

.item {
  --border-radius: 5px;
  font-weight: 'bold';
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  background-color: rgba(225, 0, 255, 0.178);
  padding: 0.5rem;
  margin: 1rem 0;
  border-radius: var(--border-radius);
}

.box {
  width: 30px;
  height: 30px;
  background: orange;
  border-radius: var(--border-radius);
}

h3 {
  font-size: 0.8rem;
}
<div class="container">
  <div class="item">
    <h3>subcomponent1</h3>
    <div class="box"></div>
  </div>
  <div class="item">
    <h3>subcomponent2</h3>
    <div class="box"></div>
  </div>
  <div class="item">
    <h3>subcomponent3</h3>
    <div class="box"></div>
  </div>
</div>
<div class="container2">
  <div class="item">
    <h3>subcomponent1</h3>
    <div class="box"></div>
  </div>
  <div class="item">
    <h3>subcomponent2</h3>
    <div class="box"></div>
  </div>
  <div class="item">
    <h3>subcomponent3</h3>
    <div class="box"></div>
  </div>
</div>

Upvotes: 2

Related Questions