Question

我的情况如下：

我有一个带标题，段落和按钮的容器。文本来自后端。它们被渲染为具有一定宽度的盒子（比如说260px）。现在，我希望当标题变长时容器变得更宽，但是我不希望在段落中发生这种情况。该段必须为100％宽度，但可以换行。标头和按钮不能。

我为您创建了一个JSFiddle作为示例：http://jsfiddle.net/swxmvgjr/2/

HTML：

<div class="container">
  <h2>heading</h2>
  <p>Nullam vel sem. Phasellus consectetuer vestibulum elit. Aenean commodo ligula eget dolor.</p>
  <button>Link</button>
</div>

<div class="container">
  <h2>heading that is a bit longer</h2>
  <p>Nullam vel sem. Phasellus consectetuer vestibulum elit. Aenean commodo ligula eget dolor.</p>
  <button>Link</button>
</div>

SCSS：

    .container {
  width: 260px;
  background-color: #ccc;
  padding: 20px;
  margin-bottom: 20px;

  h2 {
    white-space: nowrap;
    font-size: 250%;
  }

  p {

  }

  button {
    padding: 10px;
    border: 1px solid #333;
    width: 100%;
  }
}

Answer 1

https://jsfiddle.net/4ojc5fte/

似乎有人已经为我找到了解决方案：）

.box {
  display: inline-block;
  border: 1px solid red;
  min-width:260px;
}

.child {
  display: flex;
}

.child div {
  flex-grow: 1;
  width: 0;
}

如何在包含容器宽度的容器中使文本A可以由文本B升高？

1 个答案: