how to update the Pygame display inside a while loop inside the main loop

Do not try to control the game with a loop inside the application loop. Use the application loop:

frames = 0
speed = 20

def distance(x, y, x1, y1):
    distance_ = x - x1, y - y1
    return distance_

while True:
    frames += 1

    if box_two_x is not None:
        pygame.draw.rect(win, (255, 0, 255), (box_two_x, box_two_y, 13, 13))

    if distance(box_one_x, box_one_y, box_two_x, box_two_y)[1] != 0:
        if frames % speed == 0:
            box_one_y += 1
            
    pygame.display.update()

Use pygame.time.Clock to control the frames per second and thus the game speed.

The method tick() of a pygame.time.Clock object, delays the game in that way, that every iteration of the loop consumes the same period of time. See pygame.time.Clock.tick():

This method should be called once per frame.

clock = pygame.time.Clock()

def distance(x, y, x1, y1):
    distance_ = x - x1, y - y1
    return distance_

run = True
while run:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            run = False 

    if distance(box_one_x, box_one_y, box_two_x, box_two_y)[1] != 0:
        box_one_y += 1

    win.fill(0)

    # [...]

    if box_two_x is not None:
        pygame.draw.rect(win, (255, 0, 255), (box_two_x, box_two_y, 13, 13))

    pygame.display.update()
    clock.tick(60)

The typical PyGame application loop has to:

• handle the events by calling either pygame.event.pump() or pygame.event.get().
• update the game states and positions of objects dependent on the input events and time (respectively frames)
• clear the entire display or draw the background
• draw the entire scene (blit all the objects)
• update the display by calling either pygame.display.update() or pygame.display.flip()
• limit the frames per second to limit CPU usage with pygame.time.Clock.tick