Flexbox Chrome和Firefox之间的行为不同

时间:2020-02-24 17:08:45

标签: html css flexbox

虽然使用flexbox在容器内放置元素,但是在Firefox中,一切正常时,我在chrome中得到了奇怪的结果

这是容器html:

<fieldset class="addtobasket-container>
  <div class="button_wrap">
    <button type="submit" class="addtobasket">
    </button>
  </div>
  <a class="addtofav">
  </a>
</fieldset>

CSS:

.addtobasket-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: start;
}

.button-wrap {
  min-width: 40%;
  height: 100%
}

.addtobasket-container {
  width: 60px;
  height: 100%;
}

.addtobasket {
  max-width: 230px;
  height: 54px;
}

在Firefox中一切正常:

enter image description here

不幸的是,在chrome中,它总是位于单独的行中:

enter image description here

在这里找不到问题所在。有什么建议吗?

0 个答案:

没有答案