0

- Using Chrome, if a container has min_height and display:flex; the items inside it will not change adding align-items:center; while it works by giving a fixed height.
- Using Firefox the problem does not arise.

Is there a possibility to center elements vertically in chrome when the container has a min-height and flexbox?

HTML

<fieldset class="container_difficulty container">
            <legend class="legend">Difficulty</legend>
            <div>
              <input type="radio" id="easy" name="difficulty" value="easy">
              <label class="button" for="easy">Easy</label>                  
            </div>
            <div>
              <input type="radio" id="medium" name="difficulty" value="medium" checked> 
              <label class="button" for="medium">Medium</label>                                 
            </div>
            <div>
              <input type="radio" id="hard" name="difficulty" value="hard">
              <label class="button" for="hard">Hard</label>                  
            </div>
</fieldset>

CSS

.container{    
  position: relative;
  display: flex;   
  justify-content: center;   
  flex-wrap: wrap; 
}
fieldset.container{
  width: 50%;
  min-height: 20vh; //Works in Firefox, needs "height: 20vh" in Chrome

  background-color: hsl(0 50% 0% / .5);
  border: 1px solid hsl(0 0% 60% / .5);
  border-radius: 7px;
  box-shadow: 0 0 8px 0 hsla(236, 19%, 48%, 0.249);

  margin: 1.5em auto;
  padding: 1em;
  padding-top: 2em;

  text-align: center;

  justify-content: space-evenly;
  align-items: center;
  gap: .5rem;
}

Chrome vs Firefox display: https://i.stack.imgur.com/jip7d.jpg

Andrea de Martinis
  • 31
  • 4
  • The issue is related to the fieldset element, if it is not mandatory in your HTML code change it to a simple div for example and it will work – amel Feb 09 '23 at 14:05

1 Answers1

0

fieldset doesn't work with flexbox in Chrome, see this for reference.

Skully
  • 2,882
  • 3
  • 20
  • 31
Максим Мовчан
  • 137
  • 3