html – Flexbox item shrinking more than its child content

I’m trying to make two columns of items expand/shrink in a bigger column to fill the available space.
Now when I fill 1 of the child divs with items, the other one shrinks below the its items height, making it only like 50% visible, like this:
Light green is the actual item, dark green is the div

I’ve tried using flex-shrink: 0, but once I fill the top div with items, it overflows without the scroll.

I’ve also tried setting min-height, but if I have no items in the top div, the bottom div wont slide in all the way to the top.

Min-height: -webkit-min-content works the same as setting fixed min-height, no scrollbar when i overfill the parent div.

<div class="container no-padding" style="display: flex; align-content: flex-start; flex-direction: column; max-height: 50%">
    <div class="list-group mx-auto no-padding " style="display: flex; flex-direction: column; flex-grow: 1; width: 100%; overflow-y:auto">
        <div class="no-padding" style="flex-shrink: 0">
            <a href="#" class="list-group-item list-group-item-action" id="channel-name">Meow</a>
        </div>
    </div>
    <div class="list-group mx-auto no-padding " id="channel-list" style="display: flex; flex-direction: column; flex-grow: 1; width: 100%; overflow-y:auto">
        <div class="no-padding" style="flex-shrink: 0">
            <a href="#" class="list-group-item list-group-item-action" id="channel-object" name="channel">channel</a>
        </div>
    </div>
</div>

html – Duda sobre si estoy haciendo lo correcto con flexbox

 .container {
  max-width: 1280px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
        }
        .flex {
            display: flex;
        }
        
        /*navbar*/
        .navbar {
            background-color: #000;
            position: fixed;
            top: 0;
            left: 0;
            height: 44px;
            width: 100%;
            z-index: 99999;
        }
        .cont-sections-nav {
            justify-content: space-between;
            align-items: center;
            height: 44px;
            width: 100%;
        }

        .menu-icon {
            display: none;
        }
        .search-icon {
            display: block;
        }
        @media (max-width: 640px) {
            .menu-icon {
                display: block;
            }
            .search-icon, .cont-ul-nav {
                display: none;
            }
        }
  <nav class="navbar">
      <div class="container">
          <div class="cont-sections-nav flex">
              <div class="logo-brand"></div>
              <ul class="cont-ul-nav flex">
                  <li class="li-nav"><a href="#"></a></li>
                  <li class="li-nav"><a href="#"></a></li>
                  <li class="li-nav"><a href="#"></a></li>
                  <li class="li-nav"><a href="#"></a></li>
                  <li class="li-nav"><a href="#"></a></li>
                  <li class="li-nav"><a href="#"></a></li>
                  <li class="li-nav"><a href="#"></a></li>
                  <li class="li-nav"><a href="#"></a></li>
              </ul>
              <ul class="flex">
                  <li class="icon-nav menu-icon"><button></button>
</li>
                  <li class="icon-nav search-icon"><button></button></li>
              </ul>
          </div>
      </div>
  </nav>

html – Stacked inputs with rows using flexbox

.stacked-inputs,
.stacked-inputs .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
}
.stacked-inputs .row {
    width: 100%;
    margin-bottom: 10px;
}
.stacked-inputs > input,
.stacked-inputs .row > input {
    position: relative;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 0;
}
<div class="stacked-inputs">
  <input type="text" placeholder="First name">
  <input type="text" placeholder="Last name">
</div>

<br /><br />

<div class="stacked-inputs">
  <div class="row">
    <input type="text" placeholder="First name">
    <input type="text" placeholder="Last name">
  </div>
  <div class="row">
    <input type="text" placeholder="Job title">
    <input type="text" placeholder="Year started">
  </div>
</div>

html – Implementation of the vertically arranged brickwork layout of Vue Js with Flexbox

I am writing a Vue component to create a masonry layout using CSS Flexbox.

Result:Masonry

But I think if the slot contains images, the implementation efficiency is not high.

  public layout(): void {
    let columnsElem = Array.from((this.$refs.masonry).children);
    let shortestColumn = null;
    let count = 0;
    this.imagesLoaded(this.masonry, (complete, index) => {
      if (complete) count++;
      if (this.masonry.length === count) {
        this.removeAllChilds(this.$refs.masonry);
        this.masonry.forEach(children => {
          shortestColumn = columnsElem.reduce((prev, cur) => {
            return prev.clientHeight <= cur.clientHeight ? prev : cur;
          });
          shortestColumn.appendChild(children.$el);
        });
      }
    });
  }
}

Since it took some time to load the image, I wrote an image callback function to tell me that all images must be loaded before the height of all columns can be calculated.

Attach each slot to the shortest column and finally attach the slot column to the masonry $ el.
However, I have to delete all children of masonry $ el, otherwise it will continue to be attached to the children of the columns.

This is because I cannot get the img tag in the render function. Because I can only get image tags in the mounted and updated hooks.

This is the Github Link component, there are better ways to implement it, please leave your feedback, thanks in advance.

https://github.com/liho98/vue-dynamic-masonry/blob/master/src/components/Masonry.vue

Javascript – CSS Flexbox problems

Guys, I'm starting to use Flexbox. I want to use images in my container, but the images come from the distance of my article before I used position: absolute, but it doesn't work with display: flex follows my code

My CSS:

#facebook{
  background: url('/img/facebook.png') no-repeat;
  width: 35%;
  height: 35%;
  background-size: 100%;
  position: absolute;
  right: 54%;
  bottom: 54%;
  background-position: center;
  border-radius: 20px;
}

#instagra{
  background: url('/img/instagra.png') no-repeat;
  width: 35%;
  height: 35%;
  background-size: 100%;
  position: absolute;
  right: 12%;
  bottom: 54%;
  background-position: center;
  border-radius: 22px;
}

#linkedin{
  background: url('/img/linkedin.png') no-repeat;
  width: 35%;
  height: 35%;
  background-size: 100%;
  position: absolute;
  right: 54%;
  bottom: 14%;
  background-position: center;
  border-radius: 22px;
}

#hangoutsapp{
  background: url('/img/hangouts.png') no-repeat;
  width: 35%;
  height: 35%;
  background-size: 100%;
  position: absolute;
  right: 12%;
  bottom: 14%;
  background-position: center;
  border-radius: 22px;
}

.item{
  height: 100px;
  width: 100px;
  color: #212529;
  background: rgba(255,255,255,0.5);
  border: 1px solid #D3D3D3;
  background-color: lightblue;
  border-radius: 45px;
  margin: 15px 15px 15px 15px;
  padding: 75px ;
  position: absolute;
}
#container{
  height: 732px;
  width: 1500px;
  display: flex;
  flex: 0px;
  flex-wrap: wrap;
}

my HTML:

     

How do I integrate Yandex.Maps in the Flexbox?

How do I integrate Yandex.Maps in the Flexbox?

I tried, but when you change the width of the browser window, the width of the map increases (the horizontal scroll appears).

https://jsfiddle.net/khusamov/91ownd3j/31/

html {
  width: 100%;
  height: 100%;
  display: flex;
}


body {
  padding: 0;
  margin: 0;
  display: flex;
  flex: 1 1 0;
}

#map-wrap {
  display: flex;
  flex: 1 1 0;
}

#map-block {
  display: flex;
  flex: 1 1 0;
}

#map-settings {
  width: 300px;
}

#map {
  width: 100%;
  height: 100%;
}

html – Align footer links with Flexbox

.single-widget.single-widget-1 {
    display:flex;
    margin-left: 0;
  }
  .single-widget.single-widget-2 {
    display:flex;
    margin-left: 0;
  }
  .single-widget.single-widget-3 {
    display:flex;
    float: unset;
  }
  .single-widget.single-widget-1 {
    margin-left: 0;
  }
  .single-widget.single-widget-2 {
    margin-left: 0;
  }
  .single-widget.single-widget-3 {
    float: unset;
  }
  .single-widget.single-widget-1 {
    margin-left: 55px;
  }
  .single-widget.single-widget-2 {
    margin-left: 20px;
  }


  .single-widget.single-widget-1 {
    margin-left: 0;
  }
  .single-widget.single-widget-2 {
    margin-left: 0;
  }
  .single-widget.single-widget-3 {
    float: unset;
  }

html – Flexbox ignores the assigned size

I've structured something better, both my HTML and my CSS. I divided it into 2 separate parts (header and content) and then combined them into one result.

The problem is in the last part in terms of content. I understand it differently from the document I have for that particular part.

I share code so it looks better what I mean.

content.html (The part that goes well)

/* GENERAL */

::-moz-selection {
  color: white;
  background: #8d33ff;;
}

::selection {
  color: white;
  background: #8d33ff;;
}

body {
	font-family: Verdana;
	background-image: url("https://image.flaticon.com/icons/png/128/1206/1206290.png");
	width: 100%;
	background-size: 100px 80px;
}

/* ESTRUCTURA */

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: none;
}

.flex-container > div {
  background-color: none;
  color: black;
  width: 100px;
  margin: 5px;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
}

#contenido {
	background-color: none;
	float: left;
	width: 100%;
	padding: 15px;
	margin-top: 7px;
	text-align: center;
}

/* TEXTO LATERAL */

.lateral {
  background-color: rgba(236, 223, 255, 0.5);
  text-align: center;
}

/* ESTRUCTURA IMÁGENES */

*,
*::before,
*::after {
  box-sizing: border-box;
}

.grid {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(var(--columnas), 1fr);
  width: calc(100% - 20px);
  max-width: 1200px;
  gap: 10px;
}

.grid__item {
  padding-top: 85%;
  position: relative;
  border: 1px solid;
}

.grid__img {
  --object-fit: cover;
  --object-position: center center;
  display: block;
  top: 0;
  bottom: 0;
  object-fit: var(--object-fit);
  object-position: var(--object-position);
  height: 100%;
  width: 100%;
}

.grid__img,
.caption {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

@media screen and (min-width: 600px) {
  .grid {
    --columnas: 3;
  }
}

@media screen and (min-width: 400px) and (max-width:599px) {
  .grid {
    --columnas: 2;
  }
}

@media screen and (max-width: 399px) {
  .grid {
    --columnas: 1;
  }
}

.caption {
  background-color: rgba(255, 255, 255, 0.5);
  top: auto;
  bottom: 0;
  min-height: 40px;
  text-align: center;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.limpiar {
  clear: both;
}

/* IMÁGENES */

img {
  max-width: 100%;
  height: auto;
}

div.img {
  border: 1px solid #ccc;
  background-color: white;
  overflow: hidden;
}

div.img:hover {
    border: 1px solid #777;
}





  
  
  
  
  





Gatos, gatos, muchos gatos
¡Los gatos son adorables!
¡Vivan los gatos para usarlos de prueba de texto! Gatos para alargar el flexbox

Texto a colocar
Texto a colocar
Texto a colocar
Texto a colocar
Texto a colocar
Texto a colocar

The previous snippet (The unique part) is fine, but when placed together with the header part …

result.html

/* GENERAL */      
      
::-moz-selection { 
  color: white;
  background: #8d33ff;;
}

::selection {
  color: white;
  background: #8d33ff;;
}

body {
	font-family: Verdana;
	background-image: url(https://image.flaticon.com/icons/png/128/1206/1206290.png);
	width: 100%;
	background-size: 100px 80px;
}

/* ESTRUCTURA */

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: none;
}

.flex-container > div {

  margin: 5px;
  line-height: 30px;
  font-size: 15px;
}

#portada{
  background-image: url(https://previews.123rf.com/images/apostrophe/apostrophe1407/apostrophe140700038/30236976-pastel-s%C3%B3lido-textura-de-fondo-morado-color-morado-claro-y-se-desvaneci%C3%B3-dise%C3%B1o-antiguo-textura-apenada-de-l%C3%ADne.jpg);
  background-position: right bottom;
  background-repeat: no-repeat;
  width: 100%;
  height: 150px;
  margin: 5px;
}

#contenido {
	background-color: none;
	float: left;
	width: 100%;
	padding: 15px;
	margin-top: 7px;
	text-align: center;
}

/* MENÚ */

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
  float: left;
	text-align: center;
  margin: 5px;
}

.navbar a {
  float: left;
  padding: 14px 16px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #000;
}

.active {
  background-color: #4CAF50;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}

#menu a {
	background-color: none;
	display: flex;
	text-align: center;
	color: white;
  }
  
.material-icons{
  font-size: 24px;
  color: white;
  vertical-align: middle;
}

/* DROPDOWN MENÚ */

.dropdown {
  float: right;
  overflow: hidden;
  color: black;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
   overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a:hover {
  background-color: #d7b6fa;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover {
    background-color: black;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

#myDropdown a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

#myInput {
  box-sizing: border-box;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {
  outline: 3px solid #ddd;
  }

.show {
  display: block;
  }
/* TEXTO LATERAL */

.lateral {
  background-color: rgba(236, 223, 255, 0.5);
  text-align: center;
}

/* ESTRUCTURA IMÁGENES */

*,
*::before,
*::after {
  box-sizing: border-box;
}

.grid {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(var(--columnas), 1fr);
  width: calc(100% - 20px);
  max-width: 1200px;
  gap: 10px;
}

.grid__item {
  padding-top: 85%;
  position: relative;
  border: 1px solid;
}

.grid__img {
  --object-fit: cover;
  --object-position: center center;
  display: block;
  top: 0;
  bottom: 0;
  object-fit: var(--object-fit);
  object-position: var(--object-position);
  height: 100%;
  width: 100%;
}

.grid__img,
.caption {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

@media screen and (min-width: 600px) {
  .grid {
    --columnas: 3;
  }
}

@media screen and (min-width: 400px) and (max-width:599px) {
  .grid {
    --columnas: 2;
  }
}

@media screen and (max-width: 399px) {
  .grid {
    --columnas: 1;
  }
}

.caption {
  background-color: rgba(255, 255, 255, 0.5);
  top: auto;
  bottom: 0;
  min-height: 40px;
  text-align: center;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.limpiar {
  clear: both;
}

/* IMÁGENES */

img {
  max-width: 100%;
  height: auto;
}

div.img {
  border: 1px solid #ccc;
  background-color: white;
  overflow: hidden;
}

div.img:hover {
    border: 1px solid #777;
}





  
  
  
  
  




  
  
  

Cats, cats, lots of cats
Cats are adorable!
Long live the cat to use a text proof!
Cats to extend the flexbox

Text to be placed
Text to be placed
Text to be placed
Text to be placed
Text to be placed
Text to be placed

Maybe there is something that I have eaten or replaced without wanting to know what it is. I checked for a while and nothing. Also copy and paste the individual file to the result and nothing.

Will there be a conflict?

I used to id Name actions if they belong to a class, so I removed everything I could along with the style="" That was without using CSS as such, and added it well.

Maybe I was eating something like this at the time of change.

html5 – title together with the image with Flexbox

I'll create a posting area on my site (html5 and css3) to create the layout. I've been able to get the pictures right with the flexbox, but I'm having trouble putting the titles of the posts under those pictures because they blur the layout making a huge mess.

How is it going?
Enter image description here

As I wish:
Enter image description here

HTML5:

     

Postagens

Titulo da primeira imagem

CSS3:

.postagens {
    text-transform: uppercase;
    font-size:26px;
    margin-top:100px;
    text-align: center;
}

#postagens {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#postagens img {
    border:1px solid red;
    width:360px;
    height:250px;
    margin-left:30px;
    margin-right:30px;
    margin-bottom:100px;
}

How are columns in Bootstrap 4 set to the same height? Flexbox does not work

I'm using Bootstrap v4.3.1 in my Angular app.

Below is a line in one of my components:

Text to go here
Some more text here

If there is more text in a column, this column has a larger height.

I read that you just have to use it class="row-eq-height" Bootstrap 4, & that it is not even necessary to integrate it with Bootstrap 4 now.

But the pillars are not the same height, if there is one "of course longer" as the others.

Can someone please tell me what changes I have to make, so that all columns with the "longest column" match?