logo
down
shadow

Prevent flex items from stretching


Prevent flex items from stretching

Content Index :

Prevent flex items from stretching
Tag : html , By : Guid
Date : December 01 2020, 05:00 PM

help you fix your problem You don't want to stretch the span in height?
You have the possiblity to affect one or more flex-items to don't stretch the full height of the container.
div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}
<div>
  <span>This is some text.</span>
</div>
div {
  display: flex;
  height: 200px;
  background: tan;
}
span.only {
  background: red;
  align-self:flex-start;
}
span {
    background:green;
}
<div>
  <span class="only">This is some text.</span>
  <span>This is more text.</span>
</div>
div {
  align-items: baseline;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}
span.fontsize {
  font-size:2em;
}
<div>
  <span class="fontsize">This is some text.</span>
  <span>This is more text.</span>
</div>

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Prevent elements from stretching to 100% width of their flex container


Tag : html , By : Eugenio
Date : March 29 2020, 07:55 AM
like below fixes the issue The display: inline-block rule is being ignored in all browsers.
Because .btn is a flex item, its display property is controlled by the flex container. Therefore, there's no reason to use the display property on flex items.
.btn {
  /* display: inline-block; */
  align-self: flex-start /* new */
  position: relative;
  background: black;
  color: white;
  padding: 10px 40px 20px 15px;
  text-decoration: none;
  border: 1px solid black;
  margin: auto auto 10px 0px;
}
margin: auto auto 10px 0px;

Prevent image in flex container from stretching in Edge


Tag : html , By : user124112
Date : March 29 2020, 07:55 AM
Hope that helps I have an image in flex that stretches in Edge browser but is normal in other browsers. Here is my code and jsfiddle. Open jsfiddle url in chrome and edge.. I want it to look like chrome in edge. , Instead of align-self: center use align-items: center.
.logo {
    height: 100px;
    display: flex;
    /* align-self: center; */
    align-items: center; /* new */
    width: 200px;
    background: red;
}

flex items stretching on wider screens


Tag : html , By : joshski
Date : March 29 2020, 07:55 AM
wish help you to fix your issue I just finished developing my first web page using flexbox. It looks great on my screen resolution (1326x768) but when I test it on a larger screen (1894x787), the content looks crazy stretched. Below are the screen shots: , This is the source of your problem:
.main-content-left-image-1 {
  padding: 0;
  margin: 0;
  width: 100%;   <---- problem
  height: 360px; <---- problem
  background-image: url("https://gallery.mailchimp.com/f6...");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.main-content-left-image-2 {
  padding: 0;
  margin: 0;
  width: 100%;   <---- problem
  height: 360px; <---- problem
  background-image: url("https://gallery.mailchimp.com/f6...");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

Prevent image inside a flex container from stretching in Chrome


Tag : html , By : ThF
Date : March 29 2020, 07:55 AM
With these it helps An initial setting on a flex container is align-items: stretch.
Try switching the value to flex-start.
.media a {
  display: flex;
  align-items: flex-start; /* NEW */
}

Firefox flex - How to prevent flex items from growing too tall with flex-direction: column


Tag : css , By : Umang
Date : March 29 2020, 07:55 AM
wish of those help I have been working on flex layout and have run into an issue against Firefox and IE11. , Try adding overflow: auto; to the .main div
.container .innerContainer .main {
    background-color: #A3845D;
    flex-grow: 1;
    display: flex;
    overflow: auto; /*<< added */
}
Related Posts Related QUESTIONS :
  • How can I set a text as a shadow for a heading element?
  • How to fix the forms making the buttons overlap
  • Splitting XML into multiple HTML pages with XSLT?
  • How to justify empty divs in flex container
  • How to blur in CSS only one layer of when you have multiple layers in background-image?
  • Scrollable html table with fixed first row and first column, along with angular material controls within the cells of ta
  • In Django, how to extract ID attribute from html Input tag, WITHOUT using django forms
  • how to fix link tag in html after changing css
  • How do I add a top padding to the second row?
  • Is it possible to split XML into multiple HTML pages with page navigation?
  • AngularJS: responsive height in bootstrap
  • Hide second line of text with CSS
  • repeating-linear-gradient not working in Edge browser and internet Explorer Browser
  • how to make search and form category merges like amazon on bootstrap
  • Bootstrap: Rearranging rows into columns and changing the order of elements
  • How can I move a label under a text box?
  • How save LinearGradient To database
  • How to reposition an image with a linear gradient using css?
  • HTML audio will not play when page opened by batch file
  • CSS Three Tone Diagonal Background
  • How to use slots inside of template components in HTML
  • Using span tags in meta description & title, for dual languages
  • How to make an icon/span selectable by pressing Tab key?
  • Add dynamic margins using UI Kit
  • Add margin-top to textbox
  • What is the correct semantic HTML markup for a title (book, movie, etc.), according to the spec? Is it an <em> tag
  • How to make an animation in Geoserver or in Leaflet
  • Buttons overlapping when shrinking window
  • Stretch an element to the end of the automatically calculated grid, not just the explicit grid
  • What relation is there between Angular's <ng-content> and ShadowDOM
  • CSS background for div element is not working
  • CSS Marquee: multiple paragraphs overlaps
  • I want to align search bar to extreme right
  • Getting blank white space to the left of content inside pre tags
  • My viewer.html won't load any css and jss files
  • How to apply multiple styles to HTML to only part of a title?
  • Want to make text div transparent on a parallax area
  • Is there a way to make this ID plus descendants CSS rule less specific?
  • Is there a way to drop in a stylesheet to get a Material theme or similar for all form elements on the page?
  • How do I make a sideways L look in html/css?
  • Why won't the color #e67d22e1 display in Safari?
  • How to select specific tag's attribute value with xPath?
  • How to make div rows fill available height
  • How to fix text inside a block that grows
  • svg hexagon halftone pattern
  • How to edit a website's element's background colors using a chromium extention
  • What is the main tag in HTML5 ? How does it differ from body tag?
  • My image is flowing out from my div column. How I can fix it and made the image full-size into div
  • How to draw line in react
  • Why Transition css is not working in child selector css
  • How to modify materialize css select option?
  • How to center some text in a rectangle in CSS?
  • How do I equally space out css grid columns?
  • How to make sure all the parts of a macro are running correctly?
  • How to adjust the zoom of website at different browser at different screen size?
  • Can't set max height on child div properly
  • Why background color is not applying to DIV container?
  • Need to select the first-child
  • No space between attributes in buttons
  • How can I block google from crawling my page, but still let Baidu do it?
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com