How to get an SVG NOT to fill the available space?SVG fill color transparency / alpha?How to use viewbox when height of svg is dynamically changingIn what circumstances is flex-shrink applied to flex elements and how does it work?Increasing or decreasing height for an SVG element in IE 10 always keeps a constant space in the documentWhy SVG adds some space inside it?SVG with width/height doesn't scale on IE9/10/11Setting width and height of svg in Polymer elementa simple 3 level flex layout with bottom right alignmentSVG mobile orientation changeresponsive flex column with svg
What exactly is a Hadouken?
What are the arguments for California’s nonpartisan blanket (jungle) primaries?
Confusion about a proof of a limit formula
Advice for paying off student loans and auto loans now that I have my first 'real' job
Mathematica function equivalent to Matlab's residue function (partial fraction expansion)
Why hasn't the U.S. government paid war reparations to any country it attacked?
Print all lines that don't have numbers, using sed
Why did Steve Rogers choose Sam in Endgame?
Doing research in academia and not liking competition
Is it possible to cast two 9th level spells without taking a long rest in 5e?
Is there a good program to play chess online in ubuntu?
Can a pizza stone be fixed after soap has been used to clean it?
Why use null function instead of == [] to check for empty list in Haskell?
Is there an English equivalent for "Les carottes sont cuites", while keeping the vegetable reference?
Do aircraft cabins have suspension?
Why is "dark" an adverb in this sentence?
What made Windows ME so crash-prone?
Why did Spider-Man take a detour to Dorset?
Is the Warlock's Hexblade Curse unaffected by an Antimagic Field?
Why does the Trade Federation become so alarmed upon learning the ambassadors are Jedi Knights?
Do First Order blasters maintain a record of when they were fired?
When to ask for constructive criticism?
Was Willow's first magic display (blazing arrow through arm) actual magic, and if not, what's the trick?
I won USD 50K! Now what should I do with it?
How to get an SVG NOT to fill the available space?
SVG fill color transparency / alpha?How to use viewbox when height of svg is dynamically changingIn what circumstances is flex-shrink applied to flex elements and how does it work?Increasing or decreasing height for an SVG element in IE 10 always keeps a constant space in the documentWhy SVG adds some space inside it?SVG with width/height doesn't scale on IE9/10/11Setting width and height of svg in Polymer elementa simple 3 level flex layout with bottom right alignmentSVG mobile orientation changeresponsive flex column with svg
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
Say I have a row of 3 icons, each 20px x 20px, then some links (however wide the link text is) then another couple of links. I'm using flexbox to space the elements and what I would like to happen is that the space between is evenly distributed between the elements. What actually happens is that the svg will increase its size to take up the entirity of the free space.
I have tried taking out the height and width attributes from the svg but the image disappears altogether. I haver also tried a wrapper div but the svg forces it to take up the remainder of the space.
svg flexbox
asked Mar 26 at 7:32
Matthew PlayerMatthew Player
5710 bronze badges
add a comment |
Say I have a row of 3 icons, each 20px x 20px, then some links (however wide the link text is) then another couple of links. I'm using flexbox to space the elements and what I would like to happen is that the space between is evenly distributed between the elements. What actually happens is that the svg will increase its size to take up the entirity of the free space.
I have tried taking out the height and width attributes from the svg but the image disappears altogether. I haver also tried a wrapper div but the svg forces it to take up the remainder of the space.
svg flexbox
asked Mar 26 at 7:32
Matthew PlayerMatthew Player
5710 bronze badges
1
if your flexbox is in row direction trymin-width: 0on each of the flex children?
– kukkuz
Mar 26 at 7:38
add a comment |
Say I have a row of 3 icons, each 20px x 20px, then some links (however wide the link text is) then another couple of links. I'm using flexbox to space the elements and what I would like to happen is that the space between is evenly distributed between the elements. What actually happens is that the svg will increase its size to take up the entirity of the free space.
I have tried taking out the height and width attributes from the svg but the image disappears altogether. I haver also tried a wrapper div but the svg forces it to take up the remainder of the space.
svg flexbox
asked Mar 26 at 7:32
Matthew PlayerMatthew Player
5710 bronze badges
Say I have a row of 3 icons, each 20px x 20px, then some links (however wide the link text is) then another couple of links. I'm using flexbox to space the elements and what I would like to happen is that the space between is evenly distributed between the elements. What actually happens is that the svg will increase its size to take up the entirity of the free space.
I have tried taking out the height and width attributes from the svg but the image disappears altogether. I haver also tried a wrapper div but the svg forces it to take up the remainder of the space.
svg flexbox
svg flexbox
asked Mar 26 at 7:32
Matthew PlayerMatthew Player
5710 bronze badges
asked Mar 26 at 7:32
Matthew PlayerMatthew Player
5710 bronze badges
asked Mar 26 at 7:32
Matthew PlayerMatthew Player
5710 bronze badges
asked Mar 26 at 7:32
Matthew PlayerMatthew Player
5710 bronze badges
asked Mar 26 at 7:32
Matthew PlayerMatthew Player
5710 bronze badges
5710 bronze badges
1
if your flexbox is in row direction trymin-width: 0on each of the flex children?
– kukkuz
Mar 26 at 7:38
add a comment |
1
if your flexbox is in row direction trymin-width: 0on each of the flex children?
– kukkuz
Mar 26 at 7:38
1
1
if your flexbox is in row direction try
min-width: 0 on each of the flex children?– kukkuz
Mar 26 at 7:38
if your flexbox is in row direction try
min-width: 0 on each of the flex children?– kukkuz
Mar 26 at 7:38
add a comment |
1 Answer
1
active
oldest
votes
In case anyone finds this post, svg does not have any intrinsic width or height so by removing the width and height attribute from the svg something higher up in the chain needs to have an explicit width or height, then the svg will fill that space.
answered Mar 26 at 7:40
Matthew PlayerMatthew Player
5710 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55351859%2fhow-to-get-an-svg-not-to-fill-the-available-space%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
In case anyone finds this post, svg does not have any intrinsic width or height so by removing the width and height attribute from the svg something higher up in the chain needs to have an explicit width or height, then the svg will fill that space.
answered Mar 26 at 7:40
Matthew PlayerMatthew Player
5710 bronze badges
add a comment |
In case anyone finds this post, svg does not have any intrinsic width or height so by removing the width and height attribute from the svg something higher up in the chain needs to have an explicit width or height, then the svg will fill that space.
answered Mar 26 at 7:40
Matthew PlayerMatthew Player
5710 bronze badges
add a comment |
In case anyone finds this post, svg does not have any intrinsic width or height so by removing the width and height attribute from the svg something higher up in the chain needs to have an explicit width or height, then the svg will fill that space.
answered Mar 26 at 7:40
Matthew PlayerMatthew Player
5710 bronze badges
In case anyone finds this post, svg does not have any intrinsic width or height so by removing the width and height attribute from the svg something higher up in the chain needs to have an explicit width or height, then the svg will fill that space.
answered Mar 26 at 7:40
Matthew PlayerMatthew Player
5710 bronze badges
answered Mar 26 at 7:40
Matthew PlayerMatthew Player
5710 bronze badges
answered Mar 26 at 7:40
Matthew PlayerMatthew Player
5710 bronze badges
answered Mar 26 at 7:40
Matthew PlayerMatthew Player
5710 bronze badges
5710 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55351859%2fhow-to-get-an-svg-not-to-fill-the-available-space%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
if your flexbox is in row direction try
min-width: 0on each of the flex children?– kukkuz
Mar 26 at 7:38