0

I am trying to make a design where there are two columns in a box. One column contains an image and takes up 1/4 of the width under normal circumstances, and 1/2 of the width when hovered over. The other column contains a decent amount of text and takes up whatever space is left.

I am running into an issue where the CSS that tells the first column's width to be either 50% or 25% is not being respected. The first column is less than 1/8 of the width when it is supposed to be 1/4 and less than 1/4 when it is supposed to be 1/2. I have managed to create a minimal example:

html,
body {
  height: 100%;
  width: 100%;
  min-width: 100%;
}

.container {
  height: 50%;
  width: 100%;
  display: flex;
  flex-direction: row;
  border-radius: 0.25rem;
  margin: 1rem;
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
}

.left {
  margin: auto;
  width: 25%;
  height: 100%;
  border-width: 1px;
  border-style: solid;
  transition-property: width;
  transition-duration: 300ms;
  padding: 1rem;
}

.left:hover {
  width: 50%;
}

.right {
  width: auto;
  margin: auto;
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 1rem 4rem;
  border-width: 1px;
  border-style: solid;
}
<div class="container">
  <div class="left">
    Placeholder
  </div>
  <p class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula purus, lobortis luctus malesuada vitae, egestas quis lorem. Mauris ultrices mauris et enim dictum fermentum. Nam nibh nulla, posuere ut egestas a, fringilla ac augue. Vivamus sed
    eros eget purus maximus iaculis. </p>
</div>

JSFiddle link

I have looked up previous questions like this and they all seem to state that somehow the parent div's dimensions are not defined. However, in this case they are defined! html and body have defined dimensions, and so does the container div.

Why isn't the width doing what I think it should do in this case?

Johannes
  • 64,305
  • 18
  • 73
  • 130
Jake Sandler
  • 162
  • 1
  • 8

2 Answers2

1

Flex items (i.e. the children of a flex container) are allowed to grow and shrink by default. To avoid that, you can add flex-shrink: 0; and flex-grow: 0; to their CSS:

html,
body {
  height: 100%;
  width: 100%;
  min-width: 100%;
}

.container {
  height: 50%;
  width: 100%;
  display: flex;
  flex-direction: row;
  border-radius: 0.25rem;
  margin: 1rem;
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
}

.left {
  margin: auto;
  width: 25%;
  height: 100%;
  border-width: 1px;
  border-style: solid;
  transition-property: width;
  transition-duration: 300ms;
  padding: 1rem;
  flex-shrink: 0;
  flex-grow: 0;
}

.left:hover {
  width: 50%;
  flex-shrink: 0;
  flex-grow: 0;
}

.right {
  width: auto;
  margin: auto;
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 1rem 4rem;
  border-width: 1px;
  border-style: solid;
}
<div class="container">
  <div class="left">
    Placeholder
  </div>
  <p class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula purus, lobortis luctus malesuada vitae, egestas quis lorem. Mauris ultrices mauris et enim dictum fermentum. Nam nibh nulla, posuere ut egestas a, fringilla ac augue. Vivamus sed
    eros eget purus maximus iaculis. </p>
</div>
Johannes
  • 64,305
  • 18
  • 73
  • 130
0

using flex can distort widths

.left {
  width: 25%;
  display: inline-block;
  border: 1px solid red;
}

.right {
  float: right;
  width: 50%;
}

.left:hover {
  width: calc(50% - 2px);
}
<div class="container">
  <div class="left">
    Placeholder
  </div>
  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula purus, lobortis luctus malesuada vitae, egestas quis lorem. Mauris ultrices mauris et enim dictum fermentum. Nam nibh nulla, posuere ut egestas a, fringilla ac augue. Vivamus sed
    eros eget purus maximus iaculis. </div>
</div>
DCR
  • 14,737
  • 12
  • 52
  • 115