隐藏溢出不适用于 flexbox 和 margin auto答案

【问题标题】：Hidden overflow not working with flexbox and margin auto隐藏溢出不适用于 flexbox 和 margin auto
【发布时间】：2018-04-14 08:44:39
【问题描述】：

我有一个 flex 容器，里面有单独的子容器。在这些子容器中，我有一个简单的内容 div 和一个标题 div。我要做的是将标题文本垂直居中，但将其保持在框的顶部。然后，我尝试将内容 div 在框中居中，水平和垂直。

我已经想通了（但知道我这段代码是一堆乱码），但是现在当视口大小减小时，内容文本（带有溢出：隐藏）在大小减小时不会隐藏。我发现这是因为边距设置为 0，但我需要将其设置为 0，以便血腥内容 div 居中！

非常感谢您提供的任何和所有帮助。这是我为帮助您可视化问题而创建的 jsfiddle 的链接。更改视口的大小，您会看到我的问题，即在“玩家之间的总现金”框中。

http://jsfiddle.net/mpqbassm/

body {
  background: #000;
}

.flex-container {
  display: flex;
  justify-content: space-around;
  margin-right: 10px;
  margin-bottom: 10px;
}

.flex-info {
  color: white;
  font-family: 'Arial', sans-serif;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
  padding: 10px;
  border-radius: 2px;
  width: 20%;
  height: 100px;
  display: flex;
  flex-direction: column;
}

.flex-info.green {
  background: #79B0B4;
}

.flex-info.blue {
  background: #7993B4;
}

.flex-info.foam {
  background: #79B47D;
}

.flex-info.pink {
  background: #9B79B4;
}

.flex-info.red {
  background: #B4797F;
}

.flex-info .flex-title {
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.flex-info .flex-content {
  font-size: 40px;
  margin: auto;
  overflow: hidden;
}

<div class="flex-container">
  <div class="flex-info green">
    <div class="flex-title">Number of characters created</div>
    <div class="flex-content">46,401</div>
  </div>
  <div class="flex-info blue">
    <div class="flex-title">Number of vehicles purchased</div>
    <div class="flex-content">499,012</div>
  </div>
  <div class="flex-info foam">
    <div class="flex-title">Total cash amongst players</div>
    <div class="flex-content">$192,012,299</div>
  </div>
  <div class="flex-info red">
    <div class="flex-title">Total bans issued</div>
    <div class="flex-content">12</div>
  </div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

要阻止内容溢出，overflow: hidden 必须位于元素的父容器中。

在这种情况下，这将是类为 .flex-info 的任何 div。

在下面的实践中看看这个。

body {
  background: #000;
}

.flex-container {
  display: flex;
  justify-content: space-around;
  margin-right: 10px;
  margin-bottom: 10px;
}

.flex-info {
  color: white;
  font-family: 'Arial', sans-serif;
  box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);
  padding: 10px;
  border-radius: 2px;
  width: 20%;
  height: 100px;
  display: flex;
  flex-direction: column;
  overflow:hidden;
}

.flex-info.green {
  background: #79B0B4;
}

.flex-info.blue {
  background: #7993B4;
}

.flex-info.foam {
  background: #79B47D;
}

.flex-info.pink {
  background: #9B79B4;
}

.flex-info.red {
  background: #B4797F;
}

.flex-info .flex-title {
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.flex-info .flex-content {
  font-size: 40px;
  margin: auto;
  overflow: hidden;
}

<div class="flex-container">
  <div class="flex-info green">
    <div class="flex-title">Number of characters created</div>
    <div class="flex-content">46,401</div>
  </div>
  <div class="flex-info blue">
    <div class="flex-title">Number of vehicles purchased</div>
    <div class="flex-content">499,012</div>
  </div>
  <div class="flex-info foam">
    <div class="flex-title">Total cash amongst players</div>
    <div class="flex-content">$192,012,299</div>
  </div>
  <div class="flex-info red">
    <div class="flex-title">Total bans issued</div>
    <div class="flex-content">12</div>
  </div>
</div>

【讨论】：