将svg-element拉伸到flex容器的整个高度

Question

我有一个display: flex的容器。在两个角上，svg元素应该伸展到容器的整个高度。容器的高度取决于元素中的文本量。

在FF和Chrome中，它工作得很完美，但IE使svg的高度始终为150px。我不能给svg一个固定的大小，因为如果文本变成多行并且元素增长，它应该随元素拉伸。

我做了一个codepen see

<div class="flag-header">
    <div class="flag-header__corner">
        <svg class="flag-header__corner-shape" id="Layer_1" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 22.11 30" preserveAspectRatio="none">
    <polygon class="cls-1" points="22.11 30 0 30 10 15 0 0 22.11 0 22.11 30"/>
        </svg>
    </div>
    <p class="flag-header__headline">sdfgsdgfsdgf sfasd fasdf asdfasdf</p> 
    <div class="flag-header__corner">
        <svg class="flag-header__corner-shape" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.11 30" preserveAspectRatio="none">
        <polygon class="cls-1" points="0 30 22.11 30 12.11 15 22.11 0 0 0 0 30"/>
        </svg>
    </div>
</div>

.flag-header{ 
  display: flex;
  max-width: 80%;
  position: relative;
  &__headline{
    background-color:#bf0b1c;
    padding: 10px 0;
    color: white;
    font: 900 24px/120% Verdana;
    text-transform: uppercase;
  }
  &__corner{
   width: 30px;
  }
  &__corner-shape{
    height: 100%;
    width: 30px;
    fill: #bf0b1c;
  }
}

Answer 1

不是答案。充其量是一个黑客。只是对这种意外行为进行更多观察。也许这是一个错误。

移除 svg 包装器和从 svg 中移除 height: 100% 具有相同的效果。 （更接近我正在尝试调试的布局。很高兴知道包装器 OP 开始没有区别，我可以避免不必要的元素。）

.flag-header {
  display: flex;
  max-width: 80%;
  position: relative;
}

.flag-header__headline {
  background-color: #bf0b1c;
  padding: 10px 0;
  color: white;
  font: 900 24px/120% Verdana;
  text-transform: uppercase;
}

.flag-header__corner-shape {
  width: 30px;
  fill: #bf0b1c;
}

<div class="flag-header">
  <svg class="flag-header__corner-shape" id="Layer_1" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 22.11 30" preserveAspectRatio="none">
        <polygon class="cls-1" points="22.11 30 0 30 10 15 0 0 22.11 0 22.11 30"/>
            </svg>
  <p class="flag-header__headline">sdfgsdgfsdgf sfasd fasdf asdfasdf</p>
  <svg class="flag-header__corner-shape" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.11 30" preserveAspectRatio="none">
            <polygon class="cls-1" points="0 30 22.11 30 12.11 15 22.11 0 0 0 0 30"/>
            </svg>
</div>

通过将可变高度元素的 padding 与可变元素和 svg 元素上的负 margins 反转来实现的黑客攻击。

.flag-header {
  display: flex;
  max-width: 80%;
  position: relative;
  border: 1px solid black;
}

.flag-header__headline {
  background-color: #bf0b1c;
  padding: 10px 0;
  margin: -10px 0;
  color: white;
  font: 900 24px/120% Verdana;
  text-transform: uppercase;
}

.flag-header__corner-shape {
  width: 30px;
  fill: #bf0b1c;
  margin: -10px 0;
}

<div class="flag-header">
  <svg class="flag-header__corner-shape" id="Layer_1" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 22.11 30" preserveAspectRatio="none">
        <polygon class="cls-1" points="22.11 30 0 30 10 15 0 0 22.11 0 22.11 30"/>
            </svg>
  <p class="flag-header__headline">sdfgsdgfsdgf sfasd fasdf asdfasdf</p>
  <svg class="flag-header__corner-shape" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.11 30" preserveAspectRatio="none">
            <polygon class="cls-1" points="0 30 22.11 30 12.11 15 22.11 0 0 0 0 30"/>
            </svg>
</div>

如果没有任意的 padding 和 margins，黑客就会崩溃。这意味着这些属性本身都不会导致问题，它们也无法自行解决问题，但是它们可以通过相互抵消来解决问题...

.flag-header {
  display: flex;
  max-width: 80%;
  position: relative;
  border: 1px solid black;
}

.flag-header__headline {
  background-color: #bf0b1c;
  color: white;
  font: 900 24px/120% Verdana;
  text-transform: uppercase;
}

.flag-header__corner-shape {
  width: 30px;
  fill: #bf0b1c;
}

<div class="flag-header">
  <svg class="flag-header__corner-shape" id="Layer_1" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 22.11 30" preserveAspectRatio="none">
        <polygon class="cls-1" points="22.11 30 0 30 10 15 0 0 22.11 0 22.11 30"/>
            </svg>
  <p class="flag-header__headline">sdfgsdgfsdgf sfasd fasdf asdfasdf</p>
  <svg class="flag-header__corner-shape" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.11 30" preserveAspectRatio="none">
            <polygon class="cls-1" points="0 30 22.11 30 12.11 15 22.11 0 0 0 0 30"/>
            </svg>
</div>

转换为 grid 并不能解决任何问题。即使黑客停止工作。将 svg 元素中的 height 和 width 弄得一团糟，会产生一些非常奇怪的结果。

.flag-header {
  display: grid;
  max-width: 80%;
  position: relative;
  grid-template-columns: 30px auto 30px;
  border: 1px solid black;
}

.flag-header__headline {
  background-color: #bf0b1c;
  padding: 10px 0;
  color: white;
  font: 900 24px/120% Verdana;
  text-transform: uppercase;
}

.flag-header__corner-shape {
  fill: #bf0b1c;
}

<div class="flag-header">
  <svg class="flag-header__corner-shape" id="Layer_1" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 22.11 30" preserveAspectRatio="none">
        <polygon class="cls-1" points="22.11 30 0 30 10 15 0 0 22.11 0 22.11 30"/>
            </svg>
  <p class="flag-header__headline">sdfgsdgfsdgf sfasd fasdf asdfasdf</p>
  <svg class="flag-header__corner-shape" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.11 30" preserveAspectRatio="none">
            <polygon class="cls-1" points="0 30 22.11 30 12.11 15 22.11 0 0 0 0 30"/>
            </svg>
</div>

转换为 table 并不能解决任何问题。 svg 元素中的 height 值无关紧要。移除高度是有效果的，虽然不是我们想要的。

.flag-header {
  display: flex;
  max-width: 80%;
  position: relative;
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  padding: 0;
}

.flag-header__headline {
  background-color: #bf0b1c;
  padding: 10px 0;
  color: white;
  font: 900 24px/120% Verdana;
  text-transform: uppercase;
}

.flag-header__corner-shape {
  width: 30px;
  fill: #bf0b1c;
  height: 100%;
}

<table class="flag-header">
  <tbody>
    <tr>
      <td>
        <svg class="flag-header__corner-shape" id="Layer_1" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 22.11 30" preserveAspectRatio="none">
        <polygon class="cls-1" points="22.11 30 0 30 10 15 0 0 22.11 0 22.11 30"/>
            </svg>
      </td>
      <td>
        <p class="flag-header__headline">sdfgsdgfsdgf sfasd fasdf asdfasdf</p>
      </td>
      <td>
        <svg class="flag-header__corner-shape" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.11 30" preserveAspectRatio="none">
            <polygon class="cls-1" points="0 30 22.11 30 12.11 15 22.11 0 0 0 0 30"/>
            </td>
            </svg>
    </tr>
  </tbody>
</table>

转换为伪元素并不能解决问题。在原始 SVG 的 base64 编码版本上丢失了 CSS 样式。这可以通过引用 .svg 文件或内联 CSS 样式来解决。

感谢：https://stackoverflow.com/a/32046349/2578125

.flag-header {
  display: flex;
  max-width: 80%;
  position: relative;
}

.flag-header__headline {
  background-color: #bf0b1c;
  padding: 10px 0;
  color: white;
  font: 900 24px/120% Verdana;
  text-transform: uppercase;
}

.flag-header::before,
.flag-header::after {
  width: 30px;
  fill: #bf0b1c;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.11 30' preserveAspectRatio='none'%3E%3Cpolygon points='22.11 30 0 30 10 15 0 0 22.11 0 22.11 30'/%3E%3C/svg%3E");
}

.flag-header::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.11 30' preserveAspectRatio='none'%3E%3Cpolygon points='0 30 22.11 30 12.11 15 22.11 0 0 0 0 30'/%3E%3C/svg%3E");
}

<div class="flag-header">
  <p class="flag-header__headline">sdfgsdgfsdgf sfasd fasdf asdfasdf</p>
</div>

试图将@Alexei Zababurin 的方法与 OP 的目标合并。对阿列克谢来说，这种天才优雅的作品在这里变成了畸形的怪物......覆盖是甚至显示某些内容的唯一方法。

好吧，在我完全失去理智之前让这条白鲸睡一会儿。愿更聪明、更勇敢的人获胜。上帝保佑！

.flag-header {
  max-width: 80%;
  background-color: #bf0b1c;
  padding: 10px 0;
  color: white;
  font: 900 24px/120% Verdana;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: 0 30px;
  overflow: initial;
}

.flag-header::before,
.flag-header::after {
  width: 30px;
  fill: #bf0b1c;
  display: inline-block;
  margin: 0 0 0 -100%;
  margin: 0 0 0 -30px;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.11 30' preserveAspectRatio='none'%3E%3Cpolygon points='22.11 30 0 30 10 15 0 0 22.11 0 22.11 30'/%3E%3C/svg%3E");
}

.flag-header::after {
  margin: 0 -100% 0 0;
  margin: 0 -30px 0 0;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.11 30' preserveAspectRatio='none'%3E%3Cpolygon points='0 30 22.11 30 12.11 15 22.11 0 0 0 0 30'/%3E%3C/svg%3E");
}

<div class="flag-header">sdfgsdgfsdgf sfasd fasdf asdfasdf
</div>