Flexbox container issue, ignoring width and height

Question

I have the code bellow and the following issue:

The image container should be square and have:

height: 5.5rem;
width: 5.5rem;

but this dimensions are not respected.

.slider {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.items {
  justify-content: center;
  margin: 0 auto;
  position: relative;
  display: flex;
}

.item {
  display: flex;
  flex-direction: row;
  left: 0;
  outline: 0;
  top: 0;
  opacity: 0;
  position: absolute;
  visibility: hidden;
  z-index: -1;
}

.item.show {
  position: relative;
  opacity: 1;
  visibility: visible;
  z-index: 9;
}

.image {
  height: 5.5rem;
  margin: 0 0.5rem 0 0;
  width: 5.5rem;
  align-items: center;
  padding: .5rem;
  display: flex;
  border: 1px solid black;
}

.image img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 100%;
  max-width: 100%;
}


}

<div class="slide">
  <div class="items">
    <div class="item show">
      <div class="image">
        <img src="https://via.placeholder.com/150">
      </div>
      <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of</div>
    </div>
    <div class="item">
      <div class="image">
        <img src="https://via.placeholder.com/150">
      </div>
      <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a software like Aldus
        PageMaker including versions of Lorem Ipsu</div>
    </div>
  </div>
</div>
</div>

score 0 · Accepted Answer · answered Jan 20 '19 at 18:48

I just added a flex-shrink:0; to .image, and it works :)

.slider {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  }
  
.items { 
  justify-content: center;
  margin: 0 auto;
  position: relative;
  display: flex;
}

.item {
display: flex;
flex-direction: row;
left: 0;
outline: 0;
top: 0;
opacity: 0;
position: absolute;
visibility: hidden;
z-index: -1;
}

.item.show {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 9;
}

.image { 
height: 5.5rem;
margin: 0 0.5rem 0 0;
width: 5.5rem;
align-items: center;
padding: .5rem;
display:flex;
border: 1px solid black;
flex-shrink: 0;
}

.image img { 
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 100%;
    max-width: 100%;
}

}

<div class="slide">
  <div class="items">
    <div class="item show">
      <div class="image">
         <img src="https://via.placeholder.com/150">
       </div>
       <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of</div>
       </div>
 <div class="item">
      <div class="image">
         <img src="https://via.placeholder.com/150">
       </div>
       <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a  software like Aldus PageMaker including versions of Lorem Ipsu</div>
       </div>      
 </div>
 </div>
 </div>

Αntonis Papadakis · Answer 2 · 2019-01-20T21:13:26.133

0

If you want a static width and height you can set a min and a max width and height, so:

.image {
  min-height: 5.5rem;
  min-width: 5.5rem;
  max-height: 5.5rem;
  max-width: 5.5rem;
}

edited Jan 20 '19 at 21:13

answered Jan 20 '19 at 18:48

Αntonis Papadakis

1,210
1
12
22

it works because the image used is bellow min-height anf min-width, if you try with with a bigger image is (350px image), you will see is not respected. I actually need that specific square dimension, indifferent of image size. – user3541631 Jan 20 '19 at 19:27
Then you should also use max-width: 5.5rem; and max-height: 5.5rem; – Αntonis Papadakis Jan 20 '19 at 19:29

Flexbox container issue, ignoring width and height

2 Answers2