弹性和 white-space: nowrap; child 不尊重宽度

Question

看看这个片段：孩子是 parent 身高的 50%，由于孩子是 inline-block 而内容溢出 parent 有 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 因素” 部分：

弹性和 white-space: nowrap; child 不尊重宽度

flex and white-space: nowrap; child won't respect width

css

flexbox

overflow

nowrap