Why does adding 'overflow-x: hidden' to flexbox items make them change in height?

Question

To prevent the background of the .inner items from overlapping the border-radius of the #outer container I thought about using overflow-x: hidden. But when setting it on the container, the height of the items shrinks before scrolling is enabled. I tried adding overflow-y: visible and setting a fixed height, but both make no difference.
What's the reason for the height being affected and how could I solve this?

html, body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

main {
  box-sizing: border-box;
  border: 1px solid black;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: scroll;  
}
#spacer {
  padding: 10rem;
  border: 2px solid purple;
}
#outer {
  display: flex;
  justify-content: stretch;
  flex-wrap: wrap;
  border: 2px solid orange;
  border-radius: 20px;
  overflow-x: hidden; /*enabling this line makes items change their height*/
  overflow-y: visible; /*even if this is set to visible a scrollbar appears*/
}
.inner {
  flex-grow: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 2px solid orange;
  /*height: 60px; */  /*setting fixed height makes no difference*/
}
.inner:last-child {
  border-right: 0;
}

label {
  width: 100%;
  text-align: center;
  background: teal;
  padding: 20px 0;
}

input {
  position: absolute;
  z-index: -1;
}

<main>
  <div id="spacer">spacer</div>
  <div id="outer">
    <div class="inner">
      <label for="radio-1">1</label>
      <input id="radio-1" type="radio">
    </div>
    <div class="inner">
      <label for="radio-2">2</label>
      <input id="radio-2" type="radio">
    </div>
    <div class="inner">
      <label for="radio-3">3</label>
      <input id="radio-3" type="radio">
    </div>
    <div class="inner">
      <label for="radio-4">4</label>
      <input id="radio-4" type="radio">
    </div>
  </div>
</main>

Does this answer your question? [css overflow hidden increases height of container](https://stackoverflow.com/questions/22421782/css-overflow-hidden-increases-height-of-container) — Nikita Skrebets, Dec 01 '21 at 14:25
@NikitaSkrebets in the question the hight increases which seems to be due `display: inline-block` being set and how the `baseline` works in that case. In my example the elements have `display: flex` and the problem is a decreased height — Corrl, Dec 01 '21 at 14:53

Why does adding 'overflow-x: hidden' to flexbox items make them change in height?

0 Answers0