When I set overflow: hidden on the container element in the example, the corners vanish, but the flex-items lose their height and shrink down if there's not enough vertical space.
Is there an alternative way to hide the corners or an additional setting to make the elements keep their height?

Edit Some more explanation what I am trying to achieve. My 'setup':

1. navigation element with 100% height of window and 40% "responsive width"
2. container element inside nav with border-radius
3. flex-items inside container with flex-wrap: wrap and background

My goal:

• The background of the flex-items is currently visible at the corners of the container, outside of its border-radius.

Solutions I thought of / tried:

• giving the container overflow:hidden hides the corner of the flex-items, but they shrink down if there's not enough vertical space
• setting only overflow-x: hidden seems to set overflow-y: auto and a vertical scrollbar appears which should not happen
• setting the border radius on the flex-items in the 'corner positions' is no options, since the positions vary due to responsive container width and flex-wrap
• removing the height or setting min-height of the navigation solves the problem of the items lose their height. But then the Navigation has no scrollbar anymore and the content at the bottom of the navigation leaves the screen if there's not enough space

Is there a way to hide the 'flex-item corners'?

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

nav {
  box-sizing: border-box;
  border: 1px solid black;
  height: 100%;
  width: 40%;
  display: flex;
  flex-direction: column;
  overflow: scroll;  
}

#spacer {
  min-height: 400px;
  border: 2px solid darkmagenta;
}

#container {
  display: flex;
  flex-wrap: wrap;
  border: 3px solid teal;
  border-radius: 20px;
  /* overflow: hidden; */
}

.flex-item {
  flex-grow: 1;
  padding: 40px 40px;
  border: 2px solid orange;
  background: darkorange;
}

<nav>
    <div id="spacer"></div>
    <div id="container">
      <div class="flex-item">flex item</div>
      <div class="flex-item">flex item</div>
      <div class="flex-item">flex item</div>
      <div class="flex-item">flex item</div>
      <div class="flex-item">flex item</div>
      <div class="flex-item">flex item</div>
      <div class="flex-item">flex item</div>
      <div class="flex-item">flex item</div>
    </div>
  </nav>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

.flex-item:first-child {
 flex-grow: 1;
 padding: 40px 40px;
 border: 2px solid orange;
 background: darkorange;
 border-radius: 20px 0px 0px 20px;
}
.flex-item:last-child {
 flex-grow: 1;
 padding: 40px 40px;
 border: 2px solid orange;
 background: darkorange;
 border-radius: 0px 20px 20px 0px;
}

use these :first-child :last-child to keep you flex items in the border radius of the container

CodePudding user response：

overflow-x: hidden, then it will work but with scroll.

CodePudding user response：

If you remove height: 100% from main OR change it to min-height: 100% then overflow: hidden on #container will work.