How is the width from an svg holding together the width of the above code?

[asasass]

If I remove this code from wrapd:

Edit fiddle - JSFiddle - Code Playground

          <svg aria-hidden="true" class="stack" height="194" viewbox="0 0 260 194" width="260">
            <circle cx="130.25" cy="95" r="17"></circle>
          </svg>
          <div class="lines"></div>
        </div>

It affects the width of wrapb.

Edit fiddle - JSFiddle - Code Playground

How and why would an svg from a different code hold together wrapb that has no width given to it?

.wrapb {
  position: relative;
  height: 266px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

[Ray.H]

You are still getting a width here

.container {
  width: 300px;
  padding: 25px;
  overflow: hidden;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

[asasass]

If I remove this code from wrapd:

Edit fiddle - JSFiddle - Code Playground

          <svg aria-hidden="true" class="stack" height="194" viewbox="0 0 260 194" width="260">
            <circle cx="130.25" cy="95" r="17"></circle>
          </svg>
          <div class="lines"></div>
        </div>

It affects the width of wrapb.

Edit fiddle - JSFiddle - Code Playground

How and why would an svg from a different code hold together wrapb that has no width given to it?

.container {
  padding: 25px;
  overflow: hidden;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

.wrapd {
  position: relative;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

What I’m asking is, how come the width on wrapd, affects wrapb
https://jsfiddle.net/vp0sd27r/1/

          <svg aria-hidden="true" class="stack" height="194" viewbox="0 0 260 194" width="260">
            <circle cx="130.25" cy="95" r="17"></circle>
          </svg>

For instance, if I make the width 50, that 50 will be given to wrapb also.

Why does that happen?

If the width of wrapd’s svg is 50, how is wrapb able to grab that 50 and use it for its code also?

.wrapd width="50">
https://jsfiddle.net/vp0sd27r/2/

[Ray.H]

@asasass

For instance, if I make the width 50, that 50 will be given to wrapb also.

Why does that happen?

If the width of wrapd’s svg is 50, how is wrapb able to grab that 50 and use it for its code also?

Well your main wrapping div .outer is set to display: table; which is a shrink to fit container. It shrinks down to whatever the greatest width of it’s children is.

When you set the width=“50” on one svg and not the other then .outer shrinks down to accommodate that plus any margins that are set.

The svg without a width follows along and expands as far as the parent (.outer) will let it go.

Set a different width on each svg and you will see outer expand to fit the largest width.

The arrow shape svg on the top player is set to position absolute so it is removed from the flow. It’s width=“90” is not expanding the .wrapb since it has overflow:hidden on it.

Just what is it that your trying to do anyway?

[asasass]

That would explain why width is not needed on some of these.
It’s being takin from the svgs.

Edit fiddle - JSFiddle - Code Playground

.wrapa which has no width takes the width from .jacketc

.jacketc left side svg is 600 width.

The same thing with the right side.

The svgs on the right side are 260px,
.wrapf
.wrapd

Those widths are given to .wrapb and .jacketb/.wrape which have no widths.