弹性和空白：nowrap；孩子不会尊重宽度[重复]

Question

看看这个sn-p：孩子是父母身高的50%，内容溢出感谢孩子是inline-block，父母有white-space: nowrap

div.container {
  overflow: hidden;
  width: 480px;
  margin: 24px 0;
}

div.list {
  overflow: auto;
}

div.block-list {
  white-space: nowrap;
}

div.block-list div {
  display: inline-block;
  vertical-align: top;
}

div.list div {
  white-space: normal;
  width: 50%;
  outline: 1px solid white;
  background: #eee;
}

<div class="container">
  <div class="list block-list">
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.
    </div>
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías.
    </div>
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.
    </div>
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías.
    </div>
  </div>
</div>

这个实现的问题是孩子没有相同的高度。这就是我想使用 flex 的原因：

div.container {
  overflow: hidden;
  width: 480px;
  margin: 24px 0;
}

div.list {
  overflow: auto;
}

div.flex-list {
  display: flex;
  white-space: nowrap;
}

div.list div {
  white-space: normal;
  width: 50%;
  outline: 1px solid white;
  background: #eee;
}

<div class="container">
  <div class="list flex-list">
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.
    </div>
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías.
    </div>
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.
    </div>
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías.
    </div>
  </div>
</div>

在这里，它们都具有相同的高度。但是不尊重宽度，问题是内容不会溢出..

知道如何使用flex 实现它吗？ （或inline-block 解决方案具有相同的高度）

Answer 1

您需要禁用flex-shrink。

将此添加到您的代码中：

div.list div {
  flex-shrink: 0; /* new */
  white-space: normal;
  width: 50%;
  outline: 1px solid white;
  background: #eee;
}

弹性默认设置为flex-shrink: 1，这会导致项目缩小，以免溢出容器。如果您希望项目保持其定义的宽度/高度，请禁用该设置。

div.container {
  overflow: hidden;
  width: 480px;
  margin: 24px 0;
}

div.list {
  overflow: auto;
}

div.flex-list {
  display: flex;
  white-space: nowrap;
}

div.list div {
  flex-shrink: 0; /* new */
  white-space: normal;
  width: 50%;
  outline: 1px solid white;
  background: #eee;
}

<div class="container">
  <div class="list flex-list">
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.
    </div>
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías.
    </div>
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.
    </div>
    <div>
      Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías.
    </div>
  </div>
</div>

有关更详细的解释，请参阅我的回答中的 “flex-shrink 因素” 部分：

• What are the differences between flex-basis and width?