為什么不尊重CSS寬度百分比？[復制]

我正在嘗試設計一個盒子中有兩列的設計。一列包含一張圖片，正常情況下占寬度的 1/4，懸停時占寬度的 1/2。另一列包含相當數量的文本并占用剩余的空間。

我遇到了一個問題，即告訴第一列的寬度為 50% 或 25% 的 CSS 沒有得到尊重。第一列在應該是 1/4 時小于寬度的 1/8，在應該是 1/2 時小于 1/4。我設法創建了一個最小的示例：

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 鏈接

我已經查看了以前的類似問題，它們似乎都表示以某種方式div未定義 parent 的尺寸。但是，在這種情況下，它們是被定義的！html并body定義了尺寸，容器 div 也是如此。

為什么在這種情況下寬度沒有做我認為應該做的事情？

uj5u.com熱心網友回復：

默認情況下允許伸縮項（即伸縮容器的子項）增長和縮小。為避免這種情況，您可以將flex-shrink: 0;和添加flex-grow: 0;到他們的 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>

uj5u.com熱心網友回復：

使用 flex 會扭曲寬度

.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>

標籤：htmlcss弹性盒

上一篇：為什么我的游標和我的畫線在不同的邊？

下一篇：在ShinyApp中使用bsilb包時的css參考