孩子应该强迫父母增加它的宽度答案

【问题标题】：Chlidren should force parent to increase its width孩子应该强迫父母增加它的宽度
【发布时间】：2018-04-24 12:42:41
【问题描述】：

这是我想要实现的简单示例。子容器包含在父容器中，并且父容器不应缩小到容纳所有子容器所需的程度，而应保持足够大。现在它缩小到视口宽度，如果用户滚动，他可以看到其他项目，但父项看起来很奇怪。

.container {
  display: flex;
  background-color: blue;
}
.item {
  margin: 10px;
  padding: 10px;  
  background-color: red;
  font-size: 50px;
}

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

【问题讨论】：

请提供工作代码。
我把它转换成一个正在运行的sn-p。点击“expand sn-p”，将浏览器窗口缩小一点，这样所有的项目都不会适应宽度。

标签： html css flexbox

【解决方案1】：

将flex: 1 1 0; 分配给.item 类。

.container {
  display: flex;
  background-color: blue;
}
.item {
  margin: 10px;
  padding: 10px;  
  background-color: red;
  font-size: 50px;
  flex: 1 1 0;
}

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

【讨论】：

【解决方案2】：

为此，您可以在container 上使用inline-flex。

display: flex 不起作用的原因是它的行为类似于块元素，因此它不会比其父元素宽，在本例中为 body，但内联元素会随着它的内容。

堆栈sn-p

.container {
  display: inline-flex;
  background-color: blue;
}
.item {
  margin: 10px;
  padding: 10px;  
  background-color: red;
  font-size: 50px;
}

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

另一种选择是将container 的父级设置为弹性容器，在这种情况下，通过将display: flex 添加到body，这样container 也将成为弹性项目，并且作为这样不会缩小到其内容以下。

堆栈sn-p

body {
  display: flex;
}
.container {
  display: flex;
  background-color: blue;
}
.item {
  margin: 10px;
  padding: 10px;  
  background-color: red;
  font-size: 50px;
}

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

【讨论】：

【解决方案3】：

父母不再显示，现在您的问题是在项目之间留出空间。

这是父母跟随孩子身高的工作sn-p

    .container {
      display: flex;
      background-color: blue;
    }


    .item {
          flex: 1;
          padding: 10px;  
          background-color: red;
          font-size: 50px;
          position:relative;
          margin-right: 5px;
        }

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

如果您不希望项目之间有任何空格，请删除 margin-right:5px;。

【讨论】：